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

***移动端浏览器：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部分设置浏览器首次加载页面时的初始缩放级别。

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

物理像素比：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电脑平板手机。