标签：手机 设计 val ie9 选择 电脑 http padding keyword
一：什么是Viewport?
1. viewport 是用户网页的可视区域。
2. viewport中文翻译为“视区”
手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。
二：Viewport的作用
用于解决PC页面能在手机上正常显示，不会因屏幕变小而挤压布局导致页面排版混乱的问题。
三：设置Viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
这段代码的几个参数解释：
height：和 width 相对应，指定高度。
initial-scale：初始的缩放比例（默认设置为1.0）
minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）
maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）
user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面。no时 minimum-scale 与 maximum-scale 可以不用写）
四：什么是@media
@media可以根据不同的媒体类型定义不同的样式。
就是针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
五：@media使用
它有两种使用方式：
1. 直接在link中使用，通过media判断尺寸的大小在引入不同css文件
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
2. 直接在<style>标签里面设置
@media mediatype and|not|only (media feature) {
CSS-Code;
}
mediatype媒体类型有：
all 用于所有设备
print 用于打印机和打印预览
screen 用与电脑屏幕，平板电脑，智能手机等（最常用的）
还有许多已废除
and，only和not三个关键字：
not: not是用来排除掉某些特定的设备的，比如 @media not print（非打印设备）
only：only用来定某种特别的媒体类型
and：定义媒体的宽度区间
案例写法：
第一种方式写法
<link rel="stylesheet" type="text/css" media="screen and (max-width:1200px)" href="style.css">
当屏幕的宽度大于1200px时，应用style.css
<link rel="stylesheet" type="text/css" media="screen and (max-width:960px) and (min-width:1200px)" href="style.css">
当屏幕的宽度大于992px，小于1200px时，应用style.css
第二种方式写法
@media screen and ( max-width: 768px ){
body{
background: blue;
}
}
当屏幕小于768px时，用此css样式
@media screen and ( min-width: 768px ) and （max-width: 992px）{
body{
background: red;
}
}
当屏幕大于768px时，小于992px时，用此css样式
@media screen and ( min-width: 992px ){
body{
background: yellow;
}
}
当屏幕小于992px时，用此css样式
补充：还有一个等于（其它的特性不在写了）
@media screen and (max-device-width:960px){
body{
background: yellow;
}
}
当等于960px时，用此css样式
横屏：@media screen and (orientation: portrait) and (max-width: 720px) { 对应样式 }
竖屏：@media screen and (orientation: landscape) { 对应样式 }
注意：这些有CSS3和HTML5中特性，存在一定的兼容问题，处理如下
引入兼容JS文件
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
现在有很多人的IE浏览器都升级到IE9以上了，所以这个时候就有又很多诡异的事情发生了，例如现在是IE9的浏览器，但是浏览器的文档模式却是IE8:
为了防止这种情况，我们需要下面这段代码来让IE的文档模式永远都是最新的：
（如果想使用固定的IE版本，可写成：<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">）
不过我最近又发现了一个更给力的写法：
怎么这段代码后面加了一个chrome=1，这个Google Chrome Frame（谷歌内嵌浏览器框架GCF），如果有的用户电脑里面装了这个chrome的插件，就可以让电脑里面的IE不管是哪个版本的都可以使用Webkit引擎及V8引擎进行排版及运算，无比给力，不过如果用户没装这个插件，那这段代码就会让IE以最高的文档模式展现效果。这段代码我还是建议你们用上，不过不用也是可以的。
参考与引用：http://blog.csdn.net/inuyasha1121/article/details/50777116
标签：手机 设计 val ie9 选择 电脑 http padding keyword
原文地址：http://www.cnblogs.com/renshijie/p/7965494.html
