css3的一个重要的特性——media queries（媒体查询），在当今这个各种屏幕的时代，它的出现表现的尤为重要。下面直接来说css media queries的用法：1、如何使用media queries可以内联写在link标签里，如：
&link rel="stylesheet" type="text/css" href="400.css" media="screen and (min-width: 400px)"&也可以写在style样式表里，如：
@media screen and (min-width: 400px) and (max-width: 700px){
background: #
&/style&也可以写在外链css样式文件里，如：
@import url(color.css) screen and (min-width: 400px);
@media screen and (min-width: 400px) and (max-width: 700px){
background: #
}2、media queries参数设备媒体有html4规定的print screen，还有html5新增的aural braille handheld print projection screen tty tv。媒体功能有width height device-width device-height orientation aspect-ratio device-aspect-ratio color color-index monochrome resolution scan grid 参数。简要说明见下表
device-width
device-height
orientation
竖屏（portrait）
横屏（landscape）
aspect-ratio
可视宽高比（width/height）
device-aspect-ratio
设备宽高比（device-width/device-height）
每比特颜色数量？
color-index
monochrome
每像素单色数量
resolution
显示器扫描次数？
触屏单格子像素？
以上表格只是简要说明，可能有误，详细参考：查询的连接词有and（并且关系）、not（非关系）、,（英文逗号，或关系）。3、media queries语法
media_query_list
: S* [media_query [ ',' S* media_query ]* ]?
media_query
: [ONLY ? NOT]? S* media_type S* [ AND S* expression ]*
? expression [ AND S* expression ]*
media_type
expression
: '(' S* media_feature S* [ ':' S* expr ]? ')' S*
media_feature
;应用以上media queries参数：
@media screen and (min-width: 400px) and (max-width: 700px) { … }
@media screen and (min-height: 400px) and (max-height: 700px) { … }
@media screen and (device-width: 800px) { … }
@media screen and (device-height: 800px) { … }
@media all and (orientation:portrait) { … }
@media all and (orientation:landscape) { … }
@media screen and (aspect-ratio: 16/9) { … }
@media screen and (device-aspect-ratio: 16/9) { … }
@media all and (min-color: 1) { … }
@media all and (min-color-index: 1) { … }
@media all and (min-monochrome: 2) { … }
@media print and (min-resolution: 300dpi) { … }
@media print and (min-resolution: 118dpcm) { … }
@media tv and (scan: progressive) { … }
@media handheld and (grid) and (max-width: 15em) { … }
@media handheld and (grid) and (device-max-height: 7em) { … }参数值可以是整数或者分数，单位可以是px、em、dpi、dpcm等。文章声明：文章正文已结束，感谢阅读。本文系作者原创，如需转载请注明文章来源（
），不胜感激。文章标题：
文章链接：
文章分享：
相同标签：css相同标签：css相同标签：css相同标签：css相同标签：css相同标签：css相同标签：css相同标签：css相同标签：css相同标签：css35328523712712412011411097723302301942611247001235591084079950779018769946618364490126912731287128812971304130513211324132413932882107472141293492291376138562142128html+css大神求教自适应到底怎么做。_百度知道
html+css大神求教自适应到底怎么做。
不要那篇文章，那篇文章我看了无从下手啊。有没有写好的让人好理解的代码让我看看，或者说是视频教学什么的让我看看，真的感激不尽。
提问者采纳
能把需求说清楚么。。没见到需求，不太好说。
要求是什么，页面缩放，顶部的图缩放，下方的二维码大小不变，要换行？？是么。。
提问者评价
其他类似问题
@media screen and (min-width: 321px) and (max-width:400px) {body{font-size:14px}}@media screen and (min-width: 401px) and (max-width:500px) {body{font-size:16} 这个在你要求的分辨率下 你可以设置不同的元素大小
设置元素单位时请用百分比单位如width：100%；height：auto不知道你是不是这个意思
为您推荐：
其他2条回答
很简单就是设置宽度100%的css样式表就行了，例如&div style=& width:100%&&&/div&你可以试试，如有其它问题请追问我。
写下去以后怎么换行啊，比如两张图片并列的时候。我写的图片直接跟着缩放，不会换行了。
你指的是响应式布局吧，bootstrp可以去看看
自适应的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁如何去设计一个自适应的网页设计或html5_百度知道
如何去设计一个自适应的网页设计或html5
提问者采纳
如今移动互联网随着3G的普及，越来越火爆，更多需求跟随而来！APP应用市场和APP应用数量成倍成倍的增长！从而给移动互联网带来新的挑战！移动设备正超过桌面设备，成为访问互联网的最常见终端。于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？手机的屏幕比较小，宽度通常在600像素以下；PC的屏幕宽度，一般都在1000像素以上（目前主流宽度是），有的还达到了2000像素。同样的内容，要在大小迥异的屏幕上，都呈现出满意的效果，并不是一件容易的事。很多网站的解决方法，是为不同的设备提供不同的网页，比如专门提供一个mobile版本，或者iPhone / iPad版本。这样做固然保证了效果，但是比较麻烦，同时要维护好几个版本，而且如果一个网站有多个portal（入口），会大大增加架构设计的复杂度。于是，很早就有人设想，能不能”一次设计，普遍适用”，让同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整布局（layout）？一、了解什么是”自适应网页设计”自从2010年，Ethan Marcotte提出了 “自适应网页设计”（Responsive Web Design）这个名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计。他制作了一个 范例，里面是《福尔摩斯历险记》六个主人公的头像。如果屏幕宽度大于1300像素，则6张图片并排在一行。如果屏幕宽度在600像素到1300像素之间，则6张图片分成两行。如果屏幕宽度在400像素到600像素之间，则导航栏移到网页头部。如果屏幕宽度在400像素以下，则6张图片分成三行。mediaqueri.es上面有更多这样的例子。这里还有一个 测试小工具，可以在一张网页上，同时显示不同分辨率屏幕的测试效果，我推荐安装。二、需要允许网页宽度自动调整“自适应网页设计”到底是怎么做到的？其实并不难。首先，在网页代码的头部，加入一行 viewport元标签。viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。所有主流浏览器都支持这个设置，包括IE9。对于那些老式浏览器（主要是IE6、7、8），需要使用 css3-mediaqueries.js。三、在进行设计的时候不能使用绝对宽度由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要。具体说，CSS代码不能指定像素宽度：width:只能指定百分比宽度：width: xx%;或者width:四、相对大小的字体字体也不能使用绝对大小（px），而只能使用相对大小（em）。body {font: normal 100% Helvetica, Arial, sans-}上面的代码指定，字体大小是页面默认大小的100%，即16像素。h1 {font-size: 1.5}然后，h1的大小是默认大小的1.5倍，即24像素（24/16=1.5）。small {font-size: 0.875}small元素的大小是默认大小的0.875倍，即14像素（14/16=0.875）。五、流动布局（fluid grid）或瀑布流“流动布局”的含义是，各个区块的位置都是浮动的，不是固定不变的。.main {float:width: 70%;}.leftBar {float:width: 25%;}float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。另外，绝对定位（position: absolute）的使用，也要非常小心。六、选择性加载CSS“自适应网页设计”的核心，就是CSS3引入的 Media Query模块。它的意思就是，自动探测屏幕宽度，然后加载相应的CSS文件。上面的代码意思是，如果屏幕宽度小于400像素（max-device-width: 400px），就加载tinyScreen.css文件。如果屏幕宽度在400像素到600像素之间，则加载smallScreen.css文件。除了用html标签加载CSS文件，还可以在现有CSS文件中加载。@import url(“tinyScreen.css”) screen and (max-device-width: 400px);七、CSS的@media规则同一个CSS文件中，也可以根据不同的屏幕分辨率，选择应用不同的CSS规则。@media screen and (max-device-width: 400px) {.column {float:width:}#sidebar {display:}}上面的代码意思是，如果屏幕宽度小于400像素，则column块取消浮动（float:none）、宽度自动调节（width:auto），sidebar块不显示（display:none）。八、图片的自适应（fluid image）除了布局和文本，”自适应网页设计”还必须实现图片的 自动缩放。这只要一行CSS代码：img { max-width: 100%;}这行代码对于大多数嵌入网页的视频也有效，所以可以写成：img, object { max-width: 100%;}老版本的IE不支持max-width，所以只好写成：img { width: 100%; }此外，windows平台缩放图片时，可能出现图像失真现象。这时，可以尝试使用IE的 专有命令：img { -ms-interpolation-mode: }或者，Ethan Marcotte的 imgSizer.js。addLoadEvent(function() {var imgs = document.getElementByIdx_x(“content”).getElementsByTagName_r(“img”);imgSizer.collate(imgs);});不过，有条件的话，最好还是根据不同大小的屏幕，加载不同分辨率的图片。有 很多方法可以做到这一条，服务器端和客户端都可以实现。只要遵循这8条设计准则，我相信你们可以很快的设计出自适应的网页出来
电子产品技术支持
其他类似问题
为您推荐：
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁用CSS3的@media属性根据屏幕大小做自适应各种分辨率网页显示版本-media_query详解
编辑：www.fx114.net
本篇文章主要介绍了"用CSS3的@media属性根据屏幕大小做自适应各种分辨率网页显示版本-media_query详解"，主要涉及到用CSS3的@media属性根据屏幕大小做自适应各种分辨率网页显示版本-media_query详解方面的内容，对于用CSS3的@media属性根据屏幕大小做自适应各种分辨率网页显示版本-media_query详解感兴趣的同学可以参考一下。
如今，电脑显示器的屏幕分辨率向越来越大发展，而手机等移动设备终端的分辨率却不可能大到哪里去。越来越多的网站，开始让自己的页面自适合各种分辨率，在小分辨率下显示基本的内容，在大分辨率下显示全部功能，甚至是分多等级的多版本。比如说我们熟悉的wordpress后台，当屏幕分辨率小于900px的时候，左边的侧栏就会变成收拢状态（@media only screen and (max-width:900px)）。
这样的好处：让顾客得到最佳的网页视图；但是依然存在坏处：比如我自己的习惯喜欢在手机上查某些资料，某些网页用手机打开自适应后导致我要找的资料被隐藏了，比较烦躁。结论：请善用这种技术，比如前面wordpress后台的例子，收拢状态的侧栏，依然可以被点击后展开，这就是一个完美的例子。
不管怎么样，作为网站前端开发人员需要知道并且会用这种知识。这篇文章让我们揭开 css 里面 @media 属性的神秘面纱，学习一下是如何实现的。
css2里面的@media
@media&属性在CSS2里面已经存在，参见CSS2在线手册-有爱一街版：@media sMedia { sRules
} 属性详解，在这个说明页面我们可以看到在css2里面虽然支持@media属性，但是能实现的功能比较少，一般只用做打印的时候做特殊定义的CSS。
语法： @media
sMedia { sRules }
sMedia : 　指定设备名称。请参阅附录：设备类型
sRules : 　样式表定义
指定样式表规则用于指定的设备类型。请参阅link对象的media属性（特性）。
// 设置显示器用字体尺寸
@media screen {
BODY {font-size:12 }
// 设置打印机用字体尺寸
@media print {
@import &print.css&
BODY {font-size:8}
css3里面的@media
@media&属性在CSS3里面已经演变成一种&media queries（媒体查询/匹配）了，参见CSS3在线手册-有爱一街版：media
queries 详解，在CSS3里面，可以用查询语句来匹配各种类型的屏幕。
语法：@media ：&sMedia& { sRules }
取值：
&sMedia&：
指定设备名称。请参阅附录：设备类型
{sRules}：
样式表定义。
判断媒介(对象)类型来实现不同的展现。此特性让CSS可以更精确作用于不同的媒介类型，同一媒介的不同条件（分辨率、色数等等）.
media_query: [only | not]? &media_type& [ and &expression& ]*
expression: ( &media_feature& [: &value&]? )
media_type: all | aural | braille | handheld | print | projection | screen | tty | tv | embossed
media_feature: width | min-width | max-width
| height | min-height | max-height
| device-width | min-device-width | max-device-width
| device-height | min-device-height | max-device-height
| device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
| color | min-color | max-color
| color-index | min-color-index | max-color-index
| monochrome | min-monochrome | max-monochrome
| resolution | min-resolution | max-resolution
| scan | grid
media_query&媒体查询条件。包括了 only not and 这些经常在程序里面出现的逻辑判断。
expression&表达式。媒体特征的匹配与否。
media_type&媒体的种类。包括了很多。
media_feature&媒体的特征。常用的是 min-width max-width 最小最大宽度的判断。
说多了也不好理解，我们最方便从实例中学习怎么运用。下面给出一个页面例子，你可以从这个例子中看出，不同浏览器屏幕宽度、高度下的背景颜色的自动变换：
点击查看演示页面Demo
其中核心的css代码如下：
&style type=&text/css&&
body{background:}
/*蓝色 默认颜色只有当下面条件都不匹配的时候，即宽度500px-800px之间+高度100px-400px之间*/
@media screen and (max-width:500px){body{background:}}
/*宽度小于500px时 绿色*/
@media screen and (min-width:800px){body{background:}}
/*宽度大于800px时 红色*/
@media screen and (max-height:100px){body{background:}}
/*高度小于100px时 黄色*/
@media screen and (min-height:400px){body{background:}}
/*高度大于400px时 粉色*/
从上面的实例可以看出，要小于的时候用max，要大于的时候用min，逻辑是正好相反的，大家注意一下。
有了媒体匹配查询的CSS3功能之后，你就可以在一个页面上定义多套显示风格了，非常好用方便。
但是低级版本的IE不支持怎么办？谁去管它呢？你有默认的一套风格都支持就好了啊，一般手机上的浏览器都是webkit的内核，这些东西都是兼容的。所以这么好用的一个属性，大家都喜欢用。
本文标题：
本页链接：css @media的理解 - 推酷
css @media的理解
css2的@media
css2里面虽然支持@media属性，但是能实现的功能比较少，一般只用做打印的时候做特殊定义的CSS。 语法： @media sMedia { sRules } 说明： sMedia : 指定设备名称。请参阅附录：设备类型 sRules : 样式表定义 指定样式表规则用于指定的设备类型。请参阅link对象的media属性（特性）。 示例：
// 设置显示器用字体尺寸
BODY { font-size : 12pt ; }
// 设置打印机用字体尺寸
&print.css&
BODY { font-size : 8pt ;}
css3的@media
@media 属性在CSS3里面已经演变成一种 media queries（媒体查询/匹配）了,在CSS3里面，可以用查询语句来匹配各种类型的屏幕。 语法：@media ：&{ sRules } 取值：
&sMedia&：指定设备名称。
{sRules}：样式表定义。
说明： 判断媒介(对象)类型来实现不同的展现。此特性让CSS可以更精确作用于不同的媒介类型，同一媒介的不同条件（分辨率、色数等等）.
media_query: [only | not]? [ and ]*
expression: ( [: ]? )
media_type:
handheld |
projection |
media_feature: width | min-width | max-width
| height | min-height | max-height
| device-width | min-device-width | max-device-width
| device-height | min-device-height | max-device-height
| device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
| color | min-color | max-color
| color-index | min-color-index | max-color-index
| monochrome | min-monochrome | max-monochrome
| resolution | min-resolution | max-resolution
| scan | grid
:媒体查询条件。包括了 only not and 这些经常在程序里面出现的逻辑判断。
expression :表达式。媒体特征的匹配与否。
media_type :媒体的种类。包括了很多。
media_feature :媒体的特征。常用的是 min-width max-width 最小最大宽度的判断。
（推荐在Chrome或者FIREFOX下打开，打开后，按快捷键“CTRL”+”+”,“CTRL”+”-”来缩放页面）:
body{ background : blue ;} /*宽度500px-800px之间+高度100px-400px之间 蓝色*/
screen and ( max-width : 500px ){body{ background : green ;}} /*宽度小于500px时 绿色*/
screen and ( min-width : 800px ){body{ background : red ;}} /*宽度大于800px时 红色*/
screen and ( max-height : 100px ){body{ background :}} /*高度小于100px时 黄色*/
screen and ( min-height : 400px ){body{ background :}} /*高度大于400px时 粉色*/
& p &效果演示，请缩小/扩大浏览器的窗口大小注意背景色的变化。逻辑如下：&/ p &
& p &/*宽度500px-800px之间+高度100px-400px之间 蓝色*/&/ p &
& p &/*宽度小于500px时 绿色*/&/ p &
& p &/*宽度大于800px时 红色*/&/ p &
& p &/*高度小于100px时 黄色*/&/ p &
& p &/*高度大于400px时 粉色*/&/ p &
已发表评论数()
&&登&&&录&&
已收藏到推刊！
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见