***移动端浏览器：UC、QQ、欧朋、百度、360、谷歌、搜狗、猎豹；基本上都是webkit内核。

 

　　***手机频幕多：安卓480*800，480*854，540*960，720*1280，1080*1920

 

　　***移动端调试方法：谷歌的模拟手机调试（F12，底部第二个手机图标），本地服务器手机访问。

 

　　***视口viewport：就是浏览器显示页面内容的屏幕区域。以前视口默认的是980px为标准。

 

　　？ ? ? meta视口标签通知浏览器。设备有多宽，布局的视口就有多宽。

 

　　标签是如何控制网页的尺寸和缩放浏览器的说明。

 

　　width=device-Width＜/strong>部分将页面的宽度设置为跟随设备的屏幕宽度（视设备而定）。

 

　　initial-scale=1.0部分设置浏览器首次加载页面时的初始缩放级别。

 

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

 

　　***物理像素：屏幕显示的最小颗粒，是真实存在的。

 

　　物理像素比：pc端1px表示一个物理像素，iphone8等1px表示两个物理像素。一般开发尺寸是分辨率的一半。

 

　　retina（视网膜屏）：把更多的物理像素点压缩到一块屏中。手机中一般这样处理，图片100*100，在样式中width、height变成50；然后放到视网膜屏中就不会变的模糊。

 

　　背景缩放：background-size:背景宽度 ?高度；只写一个值表示等比缩放。属性值可以是像素、百分比、cover（等比缩放填充满盒子会裁剪）、contain（把图像等比扩展至最大尺寸，只要长或者宽有一个到边了就不拉伸了，所以会有留白）

 

　　***移动端的主流方案：单独制作（主流）、响应式页面兼容pc端。

 

　　移动端初始化：插件normalize.css

 

　　***移动端点击会显示高亮，去除高亮的办法：-webkit-tap-hightlight-color:transparent；设置点击透明。

 

　　在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式：-webkit-appearance:none;

 

　　禁用长按页面时弹出菜单：{-webkit-touch-callout:none}

 

　　***移动端常见布局：流式布局（百分比布局）、flex布局、less+rem+媒体查询布局、混合布局；

 

　　响应式页面兼容移动端：媒体查询、bootstarp；

 

　　流式布局：百分比布局；max-width: 最大宽 ?min-width:最小宽。

 

　　***精灵图2倍缩放注意事项：先在ps中缩放再测量，在代码里也要background-size做相应的缩放。

 

　　***flex布局：

 

　　pc端一般用传统布局，移动端一般用flex布局；

 

　　任何一个容器都可以指定为flex布局。通过给父盒子添加flex属性来控制自子盒子的位置和排列方式。

 

　　当为父盒子设定为flex布局后，子元素的float,clear,vertical-align属性将失效。

 

　　display:flex;在使用之前，一定先要确定到主轴。

 

　　父常见属性：flex-direction:设置主轴，默认主轴是x轴，row从左往右，row-reverse从右往左排列，column从上倒下，column-reverse从下到上。元素都是沿着主轴排列的。

 

　　justify-content:设置主轴上的子元素的排列方式；flex-start从头开始，从左到右；flex-end从尾部开始;center：在主轴居中对齐；space-around平分剩余空间；space-between先两边贴边在平分剩余空间。

 

　　flex-wrap:nowrap默认子元素不换行，如果装不下，会缩小子元素。wrap：装不下就换行。

 

　　alignitems：在侧轴上子元素的排列方式（单行使用）；stretch拉伸（不要设置高度）、center挤在一起居中、flex-start、flex-end。

 

　　aligncontent：在侧轴上子元素的排列方式（多行使用，换行）；stretch拉伸（不要设置高度）、center挤在一起居中、flex-start、flex-end、space-around（上下沿都有距离）、space-between（一个贴上沿，一部分贴下沿）；

 

　　flex-flow:是flex-direction和flex-wrap的复合写法。

 

　　子常见属性：

 

　　flex：定义子项目分配剩余空间，表示占多少份。flex：1；默认是0.

 

　　align-self：控制子项在自己的侧轴上的排列方式。flex-end；

 

　　order：定义子项的排列顺序。数值越小越靠前，默认是0；

 

　　flex布局种主要针对宽度变化；

 

　　rem主要是针对高度变化；

 

　　*****rem适配布局

 

　　em是相对于父元素的字体大小。

 

　　rem是相对于html元素的字体大小。html { font-size:10px;};通过修改html中的文字大小，来控制页面中元素大小，必须写在样式最上面。

 

　　媒体查询：可以针对不同的屏幕尺寸设置不同的样式。@media mediatype and|not|only （media feature）{}

 

　　mediatype媒体类型：all所有、print用于打印机、scree电脑平板手机。