视口
视口是移动设备用于显示网页的区域，一般会比移动设备的可视区域大，宽度可能是980px或1024px；
目的是为了显示整个为PC端设计的网页，这样在移动端会出现横向滚动条；为了避免滚动条，移动端会
将视口缩放到移动端窗口的大小。
缩放后的网页在移动设备上不易观看，使用<meta/>标签，让视口兼容移动设备可视区的大小。
<meta name="viewport" content="width=device-width, user-scalable=no,
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
1. viewport：视口；
2. width=device-width：设置视口的宽度等于设备的宽度；
3. user-scalable=no：不允许用户缩放；
4. initial-scale=1.0：设置初始缩放；
5. maximum-scale=1.0, minimum-scale=1.0：兼容浏览器。
6. 在<head>中生成的快捷键：meta:vp + tab键
屏幕适配
视网膜屏幕：物理像素密度更高的屏幕，常见有2倍和3倍的视网膜屏幕，其物理像素点更小；
图像在视网膜屏和一般屏幕上显示的大小一样时，由于视网膜屏的物理像素点比一般屏幕小，图像就会
变得模糊；
解决方式：使用大一倍的图像，再用CSS强制设置图像的尺寸；
1. background-size：设置背景图像的大小；
1. background-size: 500px 500px; --> 设置背景图的宽高px；
2. background-size: 100% 100%; --> 百分比设置背景图的宽高，100%表示完全填充容器；
3. auto：使用背景图的真实大小；
4. cover：等比缩放到完全覆盖容器，背景图的宽度/高度可能超出容器；
5. contain：等比缩放到与容器的宽度/高度相等，保证背景图始终被包含在容器内。
2. 标签的宽高不会影响到背景图的大小，通常会把使用标签的宽高设置的大一些，避免裁剪到背景图。
布局
1. 全适配：流体布局+响应式布局，适配PC端、平板、手机；
2. 移动端适配：流体布局+少量响应式，基于rem的布局，弹性盒模型；
3. 屏幕适配必须设置 <meta name="viewport" ... /> 才有效；
4. 对于iPhone的设计图的尺寸，如果是2倍图，所有尺寸应该先除以2才是真实的px尺寸。
流体布局
原理：用百分比设置标签的宽度width，比如 width:25%; 而height仍使用实际高度的固定值。
1. 盒子的边线无法用百分比
1. 使用计算函数 calc() 设置宽度width，比如 2px的border：width:calc(25% - 4px);
1. calc()中的运算符两边必须保证有一个空格，否则无效；
2. 使用属性 box-sizing 将盒子设置为从边线计算盒子尺寸。
2. box-sizing
1. content-box：默认的盒子尺寸计算方式；
2. border-box：设置盒子的尺寸计算方式为从边框开始，width+border+padding
响应式布局
原理：使用媒体查询的方式，通过查询浏览器窗口的宽度，对不同的宽度应用不同的样式块，
每个样式块对应的是该宽度下的布局方式，从而实现响应式布局。
1. 实际上就是根据宽度/高度的改变，动态修改CSS样式的属性，以达到适配多种终端屏幕；
2. @media only screen and (max-width: 500px) { .box li{ width:50%; } }
1. 当屏幕宽度width<=500px时，<li>盒子的宽度设置为父标签宽度的50%；
2. @media only screen and (min-width: 100px) and (max-width: 640px) { ... }
rem布局
1. em：以标签自身的文字大小font-size为参考，设置该标签的尺寸；
1. 比如 font-size:20px; 时，width:200px; --> width:10em;
2. em 单位只对当前的标签有效，对其他标签是无效的。
2. rem：以根节点<html>的文字大小font-size为参照，设置标签的尺寸；
1. <html style="font-size: 20px;">
2. div{ width:400px; height:200px } --> div{ width:20rem; height:10rem }
3. rem 单位对整个HTML都有效，在浏览器窗口大小变化时，就可以通过JS获取窗口的大小，
并重新设置<html>的font-size，从而动态改变每个标签的 width、height、margin、
padding... 达到适配不同屏幕的效果。
4. 为了避免影响阅读效果，字体大小font-size仍使用px，部分字体使用响应式布局。
3. 监听页面宽度width的变化，动态修改<html>上的style.font-size属性值;
4. innerWidth、clientWidth：前者是window对象的属性，后者是DOM对象的属性；
1. innerWidth：窗口的文档显示区(body)的宽度，不支持IE9以下的IE浏览器；
2. document.documentElement/document.body的clientWidth取代了innerWidth.
弹性盒模型布局
1. 容器属性，比如<ul></ul>
1. display: flex; --> 声明使用弹性盒布局；
2. flex-direction：子元素的排列方向；
1. row/row-reverse：子元素水平靠左排列/靠右倒序排列，row是默认属性值；
2. column/column-reverse：垂直方向排列。
3. flex-wrap：子元素超过父容器尺寸时是否换行；
1. nowrap：默认值，不换行，对子元素进行缩放；
2. wrap/wrap-reverse：换行/换行反向排列；
4. flex-flow: flex-direction的属性值 | flex-wrap的属性值 --> 同时设置；
5. justify-content：多个子元素在水平方向上的分布方式；
1. flex-start/flex-end：子元素整体靠左/右；
2. center：水平居中；
3. space-between：第一个/最后一个子元素分别靠左/右顶格，中间的子元素等分间距；
4. space-around：第一个子元素靠左的间距和最后一个子元素靠右的间距，是中间子元素
间距的一半，中间的子元素等分间距。
6. align-items：多个子元素在垂直方向上的分布方式；
1. flex-start/flex-end：子元素整体靠上/靠下；
2. center：垂直居中；
3. baseline：子元素内的文字底部对齐，如果文字大小不一致，子元素底部会对不齐；
4. stretch：如果子元素不设置高度，其高度会被拉伸到与父容器的高度一致。
7. align-content：设置多行子元素在行方向上的对其方式；
1. flex-start/flex-end：每一行的子元素整体靠上/靠下；
2. center：多行子元素整体居中；
3. space-between：第一行/最后一行子元素分别靠上/下顶格，中间行元素等分间距；
4. space-around：第一行子元素到上面的距离和最后一行子元素到下面的距离，是中间
行元素间距的一半，中间行元素等分间距。
2. 条目属性，比如<li />
1. flex-grow：表示当父容器有多余空间时，这些空间在每个子标签之间的分配比例；
1. 类似于权重，比如flex-grow: 1; --> 如果<li />是水平排列、且<ul>仍有多余空间，
则每个<li />会增大相同比例的宽度，平分<ul>的空间；
2. 如果某个<li />的flex-grow: 2; --> 该<li />的宽度会增长更多；
3. 只有使用了flex-grow属性的标签才会被分配增长空间。
2. flex-shrink：表示当父容器的空间不足、且不换行时，各个子标签的尺寸缩小比例；
3. 父容器的空间不足时，flex-shrink设置缩小比例，此时设置flex-grow是无效的；
4. flex-basis：设置弹性条目标签的初始尺寸，弹性布局的基数；
1. flex-grow在平分父容器的多余空间时，增长基数默认是相同的；
2. flex-basis:20px; --> 设置该标签的增长基数为20px。
5. align-self：复写父容器设置的对齐方式，即复写父容器的align-items属性；
6. order：重置标签在父容器中的排列位置，类似于修改数组的角标。
网友评论