我们将范例页面的父级容器宽度设置为固定的980px,对于桌面浏览环境,该宽度适用于任何宽于1024像素的分辨率。我们通过media query来监测那些宽度小于980px的设备分辨率,并将页面的宽度设置由“固定”方式改为“液态”,布局元素的宽度随着浏览器窗口的尺寸变化进行调整。当可视部分的宽度进一步减小到650px以下时,主要内容部分的容器宽度会增大至全屏,而侧边栏将被置于主内容部分的下方,整个页面变为单栏布局。在CSS3中我们可以设置不同类型的媒体条件,并根据对应的条件,给相应符合条件的媒体调用相对应的样式表。并在不改变内容的情况下,让你制作的web页面在不同的分辨率和设备下都能显示正常,并且不会因此而丢失样式。
1、link方法引入
2、xml方式引入
3、@import方式引入
4、@media引入
总结:Media Queries能在不同的条件下使用不同的样式,使用页面达到不同的渲染效果。
1、link方法引入
2、xml方式引入
3、@import方式引入
4、@media引入
总结:Media Queries能在不同的条件下使用不同的样式,使用页面达到不同的渲染效果。