视口 viewport
浏览器显示页面内容的屏幕区域。可分为 布局视口、视觉视口、理想视口。
布局视口 layout viewport
iOS、Android将这个布局视口分辨率一般设置为980px
视觉视口 visual viewport
用户正在看到的网站区域
理想视口 ideal viewport
为了使网站在移动端有最理想的浏览和阅读而设定的宽度，需手动设置meta视口标签，布局视口的宽度应该与理想视口的宽度一致，即手机屏幕有多宽，布局视口就设置多宽
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maxium-scale=1.0,minium-scale=1.0" />
物理像素/物理像素比
物理像素:屏幕显示的最小颗粒，是物理真实存在的。厂商出厂时就设置好（即分辨率），例：iphone6是750*1334
PC端1px等于1物理像素，但移动端并不一定。
一个px能显示的物理像素点的个数，称为物理像素比或屏幕像素比。
Retina视网膜屏幕是一种显示技术，可以将更多的物理像素点压缩到一块屏幕里，从而达到更高的分辨率，并提高屏幕显示的细腻程度。
二倍图
例：一个css像素为 50px*50px的图片，放到iphone8中显示(物理像素比为2.0),那么图片会被放大为 100*100物理像素显示，那么图片会出现失真情况。
解决：准备一个css像素为100px*100px的图片，通过设置图片大小50px*50px，放到iphone8被放大2倍即100*100物理像素，仍然能保持不失真。
背景缩放
background-size:长度 | 百分比 | cover | contain;
移动端开发解决方案
单独制作移动端页面（主流）: 域名前面加m,通过判断设备，如果是移动设备则跳转到移动端。
流式布局(百分比布局)、flex弹性布局(推荐)、less+rem+媒体查询布局、混合布局
响应式页面兼容移动端（其次）
媒体查询、bootstarp
移动端浏览器
基本以webkit为主，可放心使用html5标签和css3样式，浏览器私有前缀只需要考虑添加-webkit-
移动端css初始化
normalize.css http://necolas.github.io/normalize.css/
CSS3盒子模型 box-sizing
box-sizing: border-box; CSS3盒子的宽度 = CSS样式设置的width(包含boder和padding) , 盒子不会被边框和内边距撑开。
box-sizing: content-box; 传统CSS盒子宽度 = CSS样式设置的width + border + padding ， 盒子被边框和内边距撑开。
特殊样式
/*CSS3盒子模型*/ box-sizing:border-box; -webkit-box-sizing:border-box; /*清除点击高亮效果*/ -webkit-tap-highlight-color:transparent; /*移动端浏览器默认外观在iOS上加此属性才能给按钮和输入框自定义样式*/ -webkit-appearance:none; /*禁止长按页面时弹出菜单*/ img,a {-webkit-touch-callout:none;}
流式布局(百分比):
盒子的宽度设置成百分比来根据屏幕宽度进行伸缩，不受固定像素的限制。max-width、min-width、max-height、min-height
弹性布局(flex)
通过给父盒子添加flex属性来控制子盒子的位置和排列方式。将父盒子设置为弹性布局后，子元素的float/clear/vertical-align属性将失效。flex-container 容器、flex-item 项目。
常见父元素属性: flex-direction 设置主轴方向、justify-content 设置主轴上子元素排列方式、flex-wrap、align-content、align-items、flex-flow
常见子元素属性：flex、align-self、order
rem适配布局
rem是一个相对单位，基准是相对于html元素的字体大小。
em也是一个相对单位，基准是相对于父元素字体大小。
媒体查询(Media Query) CSS3新语法 : 可以根据不同的设备宽度来修改样式。
/* 媒体类型 all|print|screen 媒体特性 width|min-width|max-width */ @media 媒体类型 and|not|only (媒体特性) { css样式 ; }
引入资源
<link rel="stylesheet" media="媒体类型 and|not|only (媒体特性)" href="样式文件" />
技术方案
1、less + 媒体查询 + rem
页面元素的rem值 = 页面元素值 px / （屏幕宽度 / 划分的份数）
屏幕宽度 / 划分的份数 就是 html元素的 font-size大小
2、flexible.js + rem
flexible.js 手机淘宝团队出的移动端适配库，有了此库可以不用再写不同屏幕的媒体查询，js里面做了相应的处理，它默认将屏幕划分为10等份，不同设备下，比例仍会一致。
只需要确定当前设备的html元素文字大小即可，剩余的flexible.js会处理。
vscode插件： px 转 rem => cssrem 该插件默认html字体大小为16px 。
自定义html字体大小方法：首选项 > 设置 > 搜索：cssrootfontsize > 修改完成后重启vscode生效
响应式布局
响应式开发原理：使用媒体查询根据不同设备的宽度进行布局和样式设置，从而适配不同的设备。
响应式需要一个父级作为容器来配合子元素实现变化效果。
bootstrap 前端框架,来自Twitter(推特) 中文网 https://www.bootcss.com/
布局容器
.container 默认左右内边距为15px 大屏(>=1200px) 宽度1170px 中屏(>=992px) 宽度970px 小屏(>=768px) 宽度750px 超小屏(100%)
.container-fluid 流式布局容器，百分比宽度，占据全部视口的容器
栅格系统 .col-屏幕类型-份数
将页面布局划分为等宽的列, 12列
列嵌套 .row 可去除.container左右内边距
列偏移 .col-屏幕类型-offset-份数
列排序 .col-屏幕类型-push-份数 .col-屏幕类型-pull-份数
响应式工具:显示与隐藏 .hidden-屏幕类型 .visible-屏幕类型