《
彻底弄明白CSS3的Media Queries》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302341V2013.htm
接着,影响网站转化率的4个主要原因，在这个分支中，为小屏幕编写独立的 CSS 定义，这些定义可以笼罩桌面版 CSS 中的相应定义（只有将这段分支代码放在后面），以下针对小屏幕的 CSS 将布局变成一栏式，且使用了小尺寸的 Header 图片：
我们举一个简略的两栏式构造的例子。
挪动时代，是任何 Web 设计与开发者都不能疏忽的一个时代，总有一天，你设计的货色将被显示在两种屏幕上，桌面大屏幕跟移动小屏幕，如何让统一个网站同时适应完全不同的两种尺寸的屏幕，这是一个良久以来都不完善解决计划的问题，直到有了 CSS3。
@media only screen and (max-device-width: 480px) { } code hosted by snipt.net
@media only screen and (max-device-width: 480px) { }
@media only screen and (max-device-width: 480px) { div#wrapper { width: 400px; } div#header { background-image: url(media-queries-phone.jpg); height: 93px; position: relative; } div#header h1 { font-size: 140%,影响网站百度排名的几个因素; } #content { float: none; width: 100%; } #navigation { float:none; width: auto; } } code hosted by snipt.net
为了让这个布局更好地在手机上显示，咱们为手机版设计一个一栏式布局，且缩小 header 局部的图片大小。
CSS3 的 Media Queries
如果用户有一个支持 Media Queries 的设备，我们就可认为该设备编写专门的 CSS，让网站适应这个设备的小屏幕，英国的 Web 技巧大会 dConstruct 便基于该技术推出他们的 2010 年大会网站，手机也可以轻松拜访，以下是该网站的桌面版和手机版截图：
应用 Media Queries 为手机创立独自的 CSS
阅读器窗口的宽和高 设备的宽和高 设备的手持方向，横向仍是竖向 辨别率
这个网站在不同尺寸的设备上按不同的布局显示，并且，手机版在 iPhone，Opera Mini， Android 等装备上有完整一致的表示。
使用 Media Queries 最直接的方式是，在你的 CSS 代码中，加一段独破代码分支，如下：
--> [
网站建设之]彻底弄明确CSS3的Media Queries
在 CSS2 时期，假如你曾经为你的网站设计过打印版 CSS，就会清楚 CSS3 Media Queries 的作用，不外，CSS3 的 Media Queries 比 CSS2 的 Media Type 更适用，事实上,影响网站打开速度的因素，CSS2 的 Media Type 并未曾被多少设备所支撑过,影响站长工具中百度流量的2个因素。CSS3 的 Media Queries 能够帮你获取以下数据：
@media only screen and (max-device-width: 480px) { div#wrapper { width: 400px; } div#header { background-image: url(media-queries-phone,形成视觉冲击的几种方式.jpg); height: 93px; position: relative; } div#header h1 { font-size: 140%; } #content { float: none; width: 100%; } #navigation { float:none; width: auto; } } code hosted by snipt.net
@media only screen and (max-device-width: 480px) { } code hosted by snipt.net
@media only screen and (max-device-width: 480px) { div#wrapper { width: 400px; } div#header { background-image: url(media-queries-phone.jpg); height: 93px; position: relative; } div#header h1 { font-size: 140%; } #content { float: none; width: 100%; } #navigation { float:none; width: auto; } } Tag：MediaQueries CSS3 MediaQueries CSS3
(责任编辑：网站建设)
彻底弄明白CSS3的Media Queries相关文章