响应式布局笔记

一. 布局设计

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

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

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

二.布局响应

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

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

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

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

---

三.媒体查询

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

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

@media 设备名 only|and|not (media feature){CSS-Code}

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

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

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

例子

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

 @media only screen and (min-device-480px) and (max-device-1024px) and ( orientation:portrait ){ .box{margin:0 auto;} }

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

@import url("css/?.css" )设备名 only|and|not (media feature){CSS-Code}

例子

@import url('style/a.css') screen and (min-960px) and (max-1199px){   };

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

方式三：在link中使用media

<link rel="stylesheet" type="text/css" href="A.css" media="screen and (min- 800px)">

例子：

 <link rel="stylesheet" href="style/b.css" media=" only screen and (max-device-480px) ">

四.媒体查询@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 可以针对不同的屏幕尺寸设置不同的样式

媒体特性	取值	min/max	描述
width	<length>	yes	定义输出设备中的页面可见区域宽度
height	<length>	yes	定义输出设备中的页面可见区域高度
device-width	<length>	yes	定义输出设备的屏幕可见宽度
device-height	<length>	yes	定义输出设备的屏幕可见高度
orientation	portrait 竖屏 landscape横屏	no	定义'height'是否大于或等于'width'。 值portrait代表是---竖屏，landscape代表否---横屏
aspect-ratio	<ratio>	yes	定义'width'与'height'的比率
device-aspect-ratio	<ratio>	yes	定义'device-width'与'device-height'的比率。如常见的显示器比率：4/3, 16/9, 16/10
color	<integer>	yes	定义每一组输出设备的彩色原件个数。如果不是彩色设备，则值等于0
color-index	<integer>	yes	定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于0
monochrome	<integer>	yes	定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0
resolution	<resolution>	yes	定义设备的分辨率。如：96dpi, 300dpi, 118dpcm
scan	progressive | interlace	no	定义电视类设备的扫描工序 progressive：连续扫描；interlace：交织扫描
grid	<integer>	no	用来查询输出设备是否使用栅格或点阵。只有1和0才是有效值，1代表是，0代表否

五.常用视口

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">

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]

<meta http-equiv="X-UA-Compatible" content="IE=edge">

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

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

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

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

emmet快捷键：meta:compat

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

<!–[if lt IE 9]>

<script src=”../../css3-mediaqueries.js”></script>

<![endif]–>