一. 布局设计

1. 固定布局：以像素作为页面的基本单位，不管设备屏幕及浏览器宽度，只设计一套尺寸；
2.  可切换的固定布局：同样以像素作为页面单位，参考主流设备尺寸，设计几套不同宽度的布局。通过设别的屏幕尺寸或浏览器宽度，选择最合适的那套宽度布局；实现成本最低，但拓展性比较差；
3. 弹性布局：以百分比作为页面的基本单位，可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度，并能完美利用有效空间展现最佳效果；
4. 混合布局：同弹性布局类似，可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度，并能完美利用有效空间展现最佳效果；只是混合像素、和百分比两种单位作为页面单位。

参考https://www.w3cschool.cn/responsive/8w9adozt.html

总结：对于通栏，大于等于2栏的等分排版建议采用弹性布局；大于等于2栏的非等分排版建议采用混合布局；

二.布局响应

布局响应，对页面进行响应式的设计实现，需要对相同内容进行不同宽度的布局设计，有两种方式：桌面优先（从桌面端开始向下设计）；移动优先（从移动端向上设计）；

无论基于那种模式的设计，要兼容所有设备，布局响应时不可避免地需要对模块布局做一些变化（发生布局改变的临界点称之为断点）， 我们通过JS获取设备的屏幕宽度，来改变网页的布局，这一过程我们可以称之为布局响应屏幕。常见的主要有如下几种方式：

布局不变，对模块内的内容进行1.挤压－拉伸；2. 换行－平铺；3. 删减－增加；

布局改变，主要有：1.模块位置变换；2.模块展示方式改变：隐藏－展开；3.模块数量改变：删减－增加；

三.媒体查询

（要注意最大宽度时从大到小，最小宽度时从小到大,否则样式优先级问题）

方式一：在样式表中内嵌@media

字符间以空格相连，选取条件包含在小括号内，多种设备用逗号分隔，这一点继承了css基本语法。

• only（限定某种设备，可省略），
• and（逻辑与），
• not（排除某种设备）为逻辑关键字，
• srules为兼容设置的样式表，包含在中括号里面。

超小屏幕<768px；小屏幕>=768px；中等屏幕>=992px；大屏幕设备>=1200px

例子

/*屏宽大于或等于480px小于1024px以及垂直放置设备的css样式。*/

方式二：引用外部样式@import

例子

注意：（最好在样式表中使用，在style标签中使用IE6.7不兼容）

方式三：在link中使用media

例子：

四.媒体查询@media

使用@media 查询，你可以针对不同的媒体类型定义不同的样式。

参考http://www.runoob.com/cssref/css3-pr-mediaquery.html

https://www.w3cplus.com/content/css3-media-queries

主要媒体类型有（可用设备）：

1. all---用于所有设备
2. screen---用于电脑屏幕，平板电脑，智能手机等。
3. print---用于打印机和打印预览
4. speech---应用于屏幕阅读器等发声设备

媒体特性（功能）@media 可以针对不同的屏幕尺寸设置不同的样式

五.常用视口

viewport 是用户网页的可视区域。

viewport 翻译为中文可以叫做"视区"。

手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。

可能的值：

• width---viewport的宽度 可能的值 像素| device-width
• height – viewport的高度---可能的值 像素| device-height
• initial-scale – 初始的缩放比例
• minimum-scale – 允许用户缩放到的最小比例
• maximum-scale – 允许用户缩放到的最大比例
• user-scalable – 用户是否可以手动缩放---可能的值yes||no或者1||0
• target-densitydpi--- [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]

此属性为文档兼容模式声明，表示如果在IE浏览器下则使用最新的标准渲染当前文档

X-UA-Compatible是自从IE8新加的一个设置，对于IE8以下的浏览器是不识别的。

IE=edge 告诉IE,IE8以后的版本使用最新版本的引擎渲染网页;

chrome=1安装了GCF后可以激活Chrome Frame.

emmet快捷键：meta:compat

最后说下IE浏览器，因为他不支持media Queries的，使用时需要引用一个Media Query Javascript解决，如下