响应式网站设计？
响应式网站设计，能让你的页面在所有客户端浏览器上表现的都非常好。
响应式网站只要有HTML和CSS就可以了。当然如果有特殊要求，适当加入js也是有必要的。
什么是视口？
就是用户能看到的页面可见区域就叫视口。
在平板电脑和手机出现之前，网页只为电脑屏幕而设计。 那个年代，一个页面往往只有一种布局，固定的尺寸。
后来平板电脑和手机出现之后，为了能更好的显示页面，起初浏览器厂商的解决方案是提供一个自动缩放的功能。把pc页面缩放到手机屏幕那么大。尽量让页面全部显示出来。 感觉还不错。毕竟内容全部显示了。
但是默认情况下，页面文字很小。小的可怜，几乎看不见。 很快，响应式网站的设计方案也紧罗密布地制定开来。 各大浏览器厂商开始制定统一标准。以推进响应式网站的发展。
做响应式网站的时候，一定要在页面头部加入如下的声明：
&meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"&
具体一点就是：
&!doctype html&
&meta charset="utf-8"&
&meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"&
&title&&/title&
&body&&/body&
在 HTML 中，meta 标签没有结束标签，meta标签定义了与文档相关联的名称或值。可提供有关页面的元信息。
width=device-width 样式中定义的宽度等于设备中定义的宽度
initial-scale=1.0 缩放比例1
minimum-scale=1.0 最大缩小比例1
maximum-scale=1.0 最大放大比例1
上段代码的最终作用是，移动客户端会按你设定的尺寸来显示页面。并且比例是1，不可通过手势放大缩小。 如果不写这段代码，移动客户端的浏览器真的会以它的1px来显示你设定的1px。最终效果是被缩放的效果，字小小的那种。 总之，做响应式网站的时候记得至少要加上如下声明。
&meta name="viewport" content="width=device-width, initial-scale=1.0"&
今天的主题：什么是Media Query？
CSS2允许用户对特定media类型制定样式。
例如： 针对screen（屏幕）用 @media screen{ ... }里设定的样式。 针对打印样式用 @media print{ ... } 里的样式。
CSS3提供了更加强大的功能。 可以针对不同media类型设置样式，还根据设定的宽度或者高度指定样式。
咱看下面的例子：
@media screen and (max-width: 500px) {
body { background-color:
意思就是： 当屏幕的宽度小于等于500px的时候body的背景颜色为黑色。
平时可用如下口诀帮助记忆：
&当& ，这个时候写 @media &屏幕&，
写screen &的最大宽度为&， and (max-width:) &500px&，
max-width:后加上500px &的时候&，
这个时候加上大括号。
拼在一起就是： @media screen and (max-width: 500px) {} 然后大括号里就写我们要设定的样式。
是不是很容易记忆？多写几遍就会了。
viewport = 视口
content = 内容
device-width = 设备宽度
initial-scale = 初始-比例
minimum-scale = 最小-比例
maximum-scale = 最大-比例
media = 媒体
query = 查询
阅读(...) 评论() &今天看啥 热点：
media query中的条件重叠，mediaquery　　想必接触过响应式布局的朋友对于media query都不会陌生，响应式布局也正是通过这个关键的属性来实现的。一些响应式布局的教程中通常都会进行如下类似设置来实现不同视口宽度条件下的布局示例：
@media screen and (max-width:600px){/* 样式一 */}
@media screen and (min-width:600px) and (max-width:960px){/* 样式二 */}
@media screen and (min-width:960px){/* 样式三 */}
　　根据这些教程的解释，这种设置的效果是：当视口宽度小于等于600px时，应用样式一；当视口宽度大于等于600px且小于等于960px时，应用样式二；当视口宽度大于等于960px时，应用样式三。粗看上去没有问题，根据不同视口宽度设置了三种样式效果，但是细看的话问题就来了。上面在描述视口宽度时，都使用了&等于&这个逻辑关系。如果只针对一条规则就没什么好说的了，但600px和960px这两个值都同时满足了两条规则，即满足第一条规则的小于等于600px，又满足第二条规则的大于等于600px，这样便产生了条件重叠的问题。那么当窗口的宽度正好处于600px或960px这种处于分界位置的值的时候，会是怎样呢？
　　我们可以进行一个简单的试验，demo很简单，实现的效果是一个&div&在上述三种像素范围内的颜色切换，重点观察浏览器视口宽度在600px和960px像素时&div&的颜色到底受哪个media query设置的影响。浏览器宽度采用手动拉伸窗体的方式进行调整，绑定window对象的onresize事件以在console窗口中输出当前的窗口宽度值。
　　通过上述试验发现，当浏览器宽度值为600px时，其效果还是停留在样式一的效果上。当宽度调整为601px时，其会变成样式二的效果。也就是说，当一个值作为一个条件的上限的同时又作为另一个条件的下限时，其对于下限条件而言并不包含等于的关系。同理，对于样式三的min-width:960px而言，其含义也是在大于960px的情况下，并不包含等于960px的情况。
　　还有一种情况，比如我们想在不同的视口宽度下改变网页元素的布局，比如将横向排列改为纵向排列。当这种页面处于600px或960px这种分界值时，页面元素的排列不会符合css中设置的任何一种规则，具体是什么样子可以自己手动尝试一下。
/node/7 自力更生
法：首先你要有Media Player播放器，这个是微软的操作系统自带的。 然后你还必须有一个DivxCodec，最新的是Divx5。 有时候由于这样或者那样的实际情况，有些电影采用了外挂字幕。这个时候，要求各位的 MediaPlayer安装了Vobsub字幕插件(推荐2.09或者以上版本)。安装方法：直接运行EXE即可。完成后，播放时将字幕文件跟AVI主文件放在同一目录下，而且注意文件名要相同。播放时如果字幕插件在工作，右下角系统栏就会出现一个ICON。如果字幕正常而画面出现颠倒现象，请请右键单击ICON在“Flip image”选项上打勾。多语种字幕切换语种也请右键单击ICON，选择Chinese即切换到中文字幕。 如果你以前装过低版本的VOBSUB，请先进入安全模式，把windows目录中system32下的DVobSub.ax和vobsub.dll删除。重起计算机，再安装Vobsub2.03。 注：使用Vobsub字幕插件前请先确定三个字幕文件跟AVI文件均为同一文件名，且上层目录名为英文。 最后一点：有的2CD片子因为空间宽余，可能采用效果较好的AC3音效。如果大家的播放器没有安装AC3－Filter，那么将无法播放或者虽能播放却没有声音。 要安装AC3－Filter，先解开压缩包，将其中文件解压至C:\windows\system\下，wWin98或者WinMe的用户请运行registerfilters-98.bat，Win2000或者XP用户请运行registerfilters-win2000.cmd，运行后即完成AC3－Filter的注册。 字幕播放 将.avi(asf、mpg等也可)、.idx 和.sub或已压缩成rar的sub文件 或 .srt .ssa .sub 等Subrip MacroDVD SSA SMI各式的字幕文件，要求主文件名相同，放在同一个目录中，使用MediaPlayer 6.4或专用DivX播放器打开.AVI文件进行播放。屏幕右下角会出现DVobsub的系统图标，点击可以选择各种语言如&Chinese&字幕进行播放，还可以进入DVobsub属性页面选择其他字幕文件播放(入图)。 如果不喜欢DVobsub来播放字幕，也可以使用软件 &DivXG400& 来播放 Vobsub字幕 注意1：字幕和影片最好不要存放在中文目录下 注意2：使用DVobSub需要DX8
播放中的问题解决 如果播放时画面颠倒： 1: 在Dvobsub选择菜单中点&Flip image vertically& 2: 进入VobSub属性页，点击&Flip image vertically&. 3: 进入注册表，编辑HKEY_CURRENT_USER\Software\Gabest\DirectVobSub\General\Flip = 1. 4. 删除DivX4.x版本，安装适合的3.11版本DivX Codec，有时也可以解决。 如果播放时有声音无画面，请 如果使用最新版的VobSub，并建议请将桌面设定为32位色。 下载安装标准版的DivX3.11（必须是3.11。3.22或4.xx等都是修改版或并非同一个系列）。 注意1：字幕和影片最好不要存放在中文目录下 注意2：使用DVobSub需要DX8 ......余下全文>>
暂无相关文章
相关搜索：
相关阅读：
相关频道：
&&&&&&&&&&&&&&&&&&
HTML/CSS最近更新在 SegmentFault，解决技术问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
一线的工程师、著名开源项目的作者们，都在这里：
获取验证码
已有账号？
标签：至少1个，最多5个
CSS3 media querise
一个媒体查询（media query）包含一个媒体类型（media type）和至少一个表达式，用媒体特性限制样式表的作用范围。
媒体查询包含一个以及一个到多个测试的表达式，表达式和媒体类型将根据实际情况计算的到true或者false。如果指定的媒体类型符合当前设备并且媒体特性表达式都为真，那当前媒体查询为真。
当一个media query为true时，对应的样式表按照正常样式规则生效。指定了media query的&link&中的样式始终会下载。
除非使用了not或者only操作符，media type是可选的，默认值为all。
逻辑运算符
and：用于结合多个媒体特性(media feature)到一个media query
只有所有feature表达式为真且满足媒体类型时整个media query才为真。
以下是一个简单media query，用于检测media type为all时的一个media feature：
@media (min-width: 700px) {}
当我们需要添加限制条件是，可以使用and完成目的如下：
@media (min-width: 700px) and (orientation: landscape) {}
上面的media query只有在viewport大于700px并且width & height时生效。此时如果需要限制媒体类型为彩色电脑显示器，可以使用and添加media type如下：
@media screen and (min-width: 700px) and (orientation: landscape) {}
,逗号运算符：用于结合多个media
query，任一media query为true时应用样式。
逗号运算符相当于逻辑运算符中的or。逗号分隔的每一个media query都需要进行单独求值，使用在某一个media query上的其他运算符不会影响到其他media query。
如果需要在大于700px宽的所有设备或者宽度大于高度的彩色电脑屏幕上应用样式，可以使用如下规则：
@media (min-width: 700px), screen and (orientation: landscape) {}
not：用于对整个media query结果取反,必须位于一个media query的开头
在逗号分隔的多个media query中，not只对它作用的media query生效。not不能对单个media feature取反，只能作用于整个media query
例1：如下面的not将在最后求值：
@media not all and (monochrome) {}
等价于下面的query：
@media not (all and (monochrome)) {}
例2：下面的多个media query求值
@media not screen and (color), print and (color) {}
求值顺序如下：
@media (not (screen and (color))), print and (color) {}
only：用于向早期浏览器隐藏媒体查询，only必须位于media
query的开头
@media only screen and (min-width: 400px) and (max-width: 600px) {}
无法识别媒体查询的浏览器要求获得逗号分割的媒体类型列表，规范要求：它们应该在第一个不是连字符的非数字、字母之前截断每个值。所以上面的示例解释为：
@media only {}
因为没有only这样的媒体类型，所以样式表被忽略。如果不加only，下面的示例
@media screen and (min-width: 400px) and (max-width: 600px) {}
被解析为@media screen {}这样一来即使浏览器不知道media query的真正含义，样式也会应用于所有屏幕设备。不幸的是，IE6-8未能正确实现该规范。没有将样式应用到所有屏幕的设备，它将整个样式表忽略掉。
尽管存在此行为，如果希望向其他不太常用的浏览器隐藏样式，任然建议在媒体查询前面添加only。
媒体类型（media type）
all：适用与所有设备
print：paged material
and documents viewed on screen in print previe mode.
screen: 彩色电脑显示器
speech：intended for speech synthesizers
注意：CSS2.1和CSS3 media query定义了tty, tv, projection, handheld, braille, embossed, aural这些media type，但是它们在 中都废弃了，所以不推荐使用了
媒体特性（media feature）
下面是一些media feature，不是全部
width： viewport width
height: viewport height
aspect-ratio: viewport的宽高比如：16/9
orientation: 宽度和高度的大小关系。。
resolution: pixel density of the output device
scan: scanning process of the output device
grid: is the device a grid or bitmap
color: number of bits per color component of the output device, or zero if the device isn't color
color-index: number of entries in the output device's color lookup table, or zero if the device does not use such a table
media query常用方法
排他（exclusive）
为确保在某一个条件下只有一个样式表生效，将查询条件严格划分，如下面：
@media (max-width: 400px) {
background:
@media (min-width: 401px) and (max-width: 800px) {
background:
@media (min-width: 801px) {
background:
覆盖（overriding）
可以对元素设置相同优先级，使用样式顺序，通过覆盖，避免排他
@media (min-width: 400px) {
background:
@media (min-width: 600px) {
background:
@media (min-width: 800px) {
background:
无线端优先（Mobile first）
默认样式假设为移动设备宽度，然后通过min-width控制扩展样式
background:
@media (min-width: 600px) {
background:
PC优先（desktop first）
默认以宽屏进行样式设置，通过max-width控制样式覆盖
background:
@media (max-width: 600px) {
background:
0 收藏&&|&&8
你可能感兴趣的文章
8 收藏，1.4k
1 收藏，566
4 收藏，1.8k
分享到微博？
我要该，理由是：【图文】第7讲 Media Queries移动设备样式_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
第7讲 Media Queries移动设备样式
大小：1.77MB
登录百度文库，专享文档复制特权，财富值每天免费拿！
你可能喜欢}