问题
These days people are using various screen sizes to view websites. I need to figure out how to set up a dynamic website width which can automatically change with the screen size. I created a website with 1200px wide. The website and the content is too big for my laptop screen. But it is more suitable with my other monitor due to it is big in size. Can I adjust that width to change dynamically with the monitor size of the user?
回答1:
You can use CSS media queries for this. (note: older versions of browsers won't support)
Media Queries is a CSS3 module allowing content rendering to adapt to conditions such as screen resolution (e.g. smartphone screen vs. computer screen).
More specifically, it will look at the following:
height and width of the device height and width of the browser
screen resolution orientation of the device (for mobile phones and
tablets; portrait or landscape)
CSS2 allows you to specify stylesheet for specific media type such as screen or print. Now CSS3 makes it even more efficient by adding media queries.
You can add expressions to media type to check for certain conditions and apply different stylesheets. For example, you can have one stylesheet for large displays and a different stylesheet specifically for mobile devices.
It is quite powerful because it allows you to tailor to different resolutions and devices without changing the content.
Example:
The following CSS will apply if the viewing area is smaller than 600px.
@media screen and (max-width: 600px) {
.class {
background: #ccc;
}
}
If you want to link to a separate stylesheet, put the following line of code in between the <head> tag.
<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />
Multiple Media Queries:
You can combine multiple media queries. The following code will apply if the viewing area is between 600px and 900px.
@media screen and (min-width: 600px) and (max-width: 900px) {
.class {
background: #333;
}
}
Device Width:
The following code will apply if the max-device-width is 480px (eg. iPhone display). Note: max-device-width means the actual resolution of the device and max-width means the viewing area resolution.
@media screen and (max-device-width: 480px) {
.class {
background: #000;
}
}
Also this is a good article to read on resolution specific stylesheets on css tricks
来源：https://stackoverflow.com/questions/25338858/dynamic-website-width