Question

I'm writing a website using PHP, HTML, and CSS.

If I use a PHP file as the main page and import each HTML document with it's respective CSS document imported in each HTML file,

how would I make the elements comply with each other's presence and allow the web page to be viewed at different window sizes?

Answer 1

This is called responsive design and there are tons of information, resources and tutorials on this on the web.
http://www.w3schools.com/html/html_responsive.asp
http://www.creativebloq.com/netmag/16-really-useful-responsive-design-tutorials-71410085

Answer 2

@dumbsearch2 knows about the topic. =)

Answer 3

Thanks for the shoutout @e.mccormick

As a web developer, I'm quite knowledgable in this field- and what @Lyrae advised is a great start, but that's just telling you how to make websites that kind of work with all devices. Adaptive web design is more of what you're looking for; they're both easily confused, but it's important to know the differences. Adaptive web design is really easy to implement, and media queries are darn easy to paste in. It's really cool, and exciting.

Here is something to read up on an implementation of adaptive web design, using media queries:

http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Something that's important to know this responsive vs adaptive web design. Pick what's best for your project, run with that technology, and explore it.

http://www.techrepublic.com/blog/web-designer/what-is-the-difference-between-responsive-vs-adaptive-web-design/

Answer 4

I'm stupid when it comes to some other computer science technologies- @e.mccormick is great and is a really good helper for a lot of languages, but web development is my stuff and I'm glad if I could help.

Answer 5

Hmm interesting, didn't know there actually were two separate terms, I've always gone with RWD for both of them. Anyway, I slightly disagree with your statement "... but that's just telling you how to make websites that kind of work with all devices." @dumbsearch2 and so does people on SO. http://stackoverflow.com/questions/14831530/responsive-design-vs-adaptive-design

RWD is way better in terms of device-size compatibility but like you said AWD is fairly simple to learn due to it's non-fluid nature and the @media queries. I also recommend interested people to look at the Boostrap framework http://getbootstrap.com/ It's a great way to start with AWD/RWD if you're new in the field.

Answer 6

No problem! :) RWD vs AWD is a common front-end interview question.

And sure, I read up on the StackOverflow question you provided. I correct myself: most good AWD designs do not exclusively use AWD. That would be stupid- they adjust, yes, based on size, but still should be RWD to be effective. You can't make a new design for every pixel that a browser window is different- that's just bad design, and, as you said, a lack of fluidity.

Try resizing the OpenStudy window- that's RWD right there. When it gets under 600 pixels, it dynamically changes the stylesheet using media queries because it thinks that it's a mobile device.

I'm just trying to say that the both compliment themselves.