html5 移动端、几种常见的布局、flex布局

1、html5 移动端、几种常见的布局、flex布局*移动端扫瞄器：uc、qq、欧朋、百度、360、谷歌、搜狗、猎豹；基本上都是webkit内核。*手机频幕多：安卓480*800，480*854，540*960，720*1280，1080*1920*移动端调试办法：谷歌的模拟手机调试（f12，底部其次个手机图标），本地服务器手机拜访。*视口viewport：就是扫瞄器显示页面内容的屏幕区域。以前视口默认的是980px为标准。？ ? ? meta视口标签通知扫瞄器。设备有多宽，布局的视口就有多宽。标签是如何控制网页的尺寸和缩放扫瞄器的解释。width=device-width/strong>部

2、分将页面的宽度设置为尾随设备的屏幕宽度（视设备而定）。initial-scale=1.0部分设置扫瞄器首次加载页面时的初始缩放级别。*物理像素：屏幕显示的最小颗粒，是真切存在的。物理像素比：pc端1px表示一个物理像素，iphone8等1px表示两个物理像素。普通开发尺寸是辨别率的一半。retina（视网膜屏）：把更多的物理像素点压缩到一块屏中。手机中普通这样处理，100*100，在样式中width、height变成50；然后放到视网膜屏中就不会变的含糊。背景缩放：background-size:背景宽度 ?高度；只写一个值表示等比缩放。属性值可以是像素、百分比、cover（等比缩放填弥漫盒子

3、会裁剪）、contain（把图像等比扩展至最大尺寸，只要长或者宽有一个到边了就不拉伸了，所以会有留白）*移动端的主流计划：单独制作（主流）、响应式页面兼容pc端。移动端初始化：插件normalize.css*移动端点击会显示高亮，去除高亮的方法：-webkit-tap-hightlight-color:transparent；设置点击透亮。在移动端扫瞄器默认的外观在ios上加上这个属性才干给按钮和输入框自定义样式：-webkit-appearance:none;禁用长按页面时弹出菜单：-webkit-touch-callout:none*移动端常见布局：流式布局（百分比布局）、flex布局、l

4、ess+rem+媒体查询布局、混合布局；响应式页面兼容移动端：媒体查询、bootstarp；流式布局：百分比布局；max-width: 最大宽 ?min-width:最小宽。*精灵图2倍缩放注重事项：先在ps中缩放再测量，在代码里也要background-size做相应的缩放。*flex布局：pc端普通用传统布局，移动端普通用flex布局；任何一个容器都可以指定为flex布局。通过给父盒子添加flex属性来控制自子盒子的位置和罗列方式。当为父盒子设定为flex布局后，子元素的float,clear,vertical-align属性将失效。display:flex;在用法之前，一定先要确定到主轴

5、。父常见属性：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：在侧轴上子元素的罗列方

6、式（单行用法）；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中的文字大小，来控制页面中元素大小，必需写在样式最上面。媒体查询：可以针对不同的屏幕尺寸设置不