而CSS3是CSS的最新“标准”，也是CSS的版本升级，推出了一些新的东西盒子模型多栏布局媒体查询动画背景和边框列表模块语言模块文字特效等模块可能有人会问，有CSS和CSS3，那有没有CSS2呢其实，我们；导入URLphonecss 媒体查询也可以在样式表中使用，如下所示媒体专用屏幕和最大宽度400像素 导航栏 浮动无宽度400px 测试媒体查询 测试代码非常重要针对平板电脑和智能手机的测试使测试变得更加复杂；媒体查询的使用方式如下media minwidth800px and maxwidth1200px 即屏幕分辨率大于800，小于1200的使用这个策略这样就可以根据不同的屏幕分辨率在css样式里设置图片的宽度了。

媒体查询写在CSS样式代码的最后，CSS是层叠样式表，在同一特殊性下，靠后的的样式会重叠前面的样式 4怎样使用media 一首先需要在html文档中添加以下代码，用来兼容移动设备的显示效果 pswidth=devicewidth宽度等于当前；网页自适应浏览器大小\x0d\x0a\x0d\x0a首先要在头部，即标签内写自适应代码，如下\x0d\x0a\x0d\x0a其次，网页内部的元素宽度要使用百分比，在不同的屏幕大小下需使用媒体查询定义不同的css代码，例如\x；这种网页布局就是“自适应布局”有人喜欢把“Responsive layout”直译成‘响应式布局’，本人觉得‘自适应布局’更本土化这种布局的特点是使用CSS媒体查询语句@media screen and ，能根据页面宽度，让页面布局；为了让不识别媒体查询语句的浏览器依然识别到媒体介质，可以使用 only 关键字进行hackHtml代码 添加了 only 关键字后，支持媒体查询语句的浏览器依然正常解析但不支持媒体查询语句但正确读取媒体介质的设备，由于先读取到；如果你在行内写了CSS属性，例如 这样写的CSS属性权重最高，如要使@media媒体查询响应式CSS生效，就如下面的例子写 media screen and minwidth900pxabout_yxdisplay ！important在CSS属性后面加上！importan；在CSS里添加媒体查询，查询屏幕宽度的大小具体语句比如，这里就是查询最新屏幕宽度980px最大屏幕宽度2046px的时候，加载quotCSSmin980pxcssquot这个CSS文件，min980pxcss文件里要用百分比的方式来布局，这样布局就自适应了；Html代码 添加了 only 关键字后，支持媒体查询语句的浏览器依然正常解析但不支持媒体查询语句但正确读取媒体介质的设备，由于先读取到 only 而不是 screen ，将忽略这个样式不支持媒体查询的IE不论是否有 only ，都直接；1css3媒体查询就是为了适应各种设备，查询媒介设备，来添加不同的样式，不会在行内使用2从web标准的设计来讲，主张css样式和html结构分离，建议使用外部文件或内联样式。

可以用谷歌浏览器里面有iPhone5的尺寸，然后用媒体查询它的宽度就行了 media screen and maxwidth 320px。

把only screen and都去掉就好了，这是媒体查询代码，表示只有在屏幕尺寸小于639像素的时候才会应用下面的样式如果想要在手机端自适应，你还需要写上下面这句话具体如下1简介 编程是编写程序的中文简称，就是让计算机；Media Queries直译过来就是“媒体查询”，在我们平时的Web页面中head部分常看到这样的一段代码或者这样的形式@import urlquotcssstylecssquot不知道大家留意；这位网友你好，这是媒体查询代码，表示只有在屏幕尺寸小于639像素的时候才会应用下面的样式如果想要在手机端自适应，你还需要写上下面这句话。

你可能需要检查和修改你的CSS样式以适应这种情况具体来说，你可能需要使用媒体查询Media Queries媒体查询是CSS3的一个特性，允许你根据设备的特定条件应用不同的CSS样式例如，你可以根据浏览器窗口的大小来更改网站的；直接定义link的media属性值来判断就是了，看下边这个demo。