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

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

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

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

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

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

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

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

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

http://necolas.github.io/normalize.css/

npm install 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布局：https://www.jianshu.com/p/4290522e1560

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电脑平板手机。

and|not|only关键字：

media feature特性：width、min-width、max-width.

@media screen and (max-width:800px){

     body {

          background:red;

            }上面的意思是手机屏幕宽度小于800时，body的颜色时红色。

}

引入资源：直接在link中判断设备尺寸，然后引入相应的css。<link rel="stylesheet" href="" media="screen and (min-width:320px)">

<link rel="stylesheet" href="" media="screen and (min-width:640px)">

***less扩展来css特性。

中文地址：lesscss.cn

常见的css预处理器有：Sass、Less、Stylus。

新建一文件以.less结尾。

less变量：先定义后使用；@变量：值；body { background-color:@变量}

less编译：html页面不能直接使用less，必须编译成css才能使用。EasyLESS插件可以自动把less文件直接编译成css，只要保存less文件，就自动会生成一个同名的css文件；

**less嵌套：

.top {
	background-color:green;
	a {
		background-color:white;
		// 伪类必须要加&符号
		&:hover{
color: blue;
		}
	}
}

如果是&代表当前父元素的伪类或者伪元素或者交集选择器，如果不加&就表示后代。

less运算：数字、颜色、变量都可以运算，加减乘除。运算符的左右两侧要有一个空格。如果两个数都有单位且不一样，最后的结果以第一个单位为准。

@color: red;
@border:5+10px;
body{
background-color: @color;
}
.top {
	border:@border black solid;
	width: 200px-50;
	a {
		background-color:white;
		// 伪类必须要加&符号
		&:hover{
color: blue;
		}
	}
}

***less遇到的问题：Unable to load plugin clean-css please make sure that it is installed under or at the same level as less

解决吧less的版本降低，npm install less@1.6.2 -g；保存后就会自动的生成相应的css文件。

***rem+媒体查询+less

首先选750px为标准；用屏幕尺寸除以我们划分的分数，得到html里面的文字大小（不同屏幕得到的文字大小是不一样的），

最后页面元素的rem值 = 页面元素在750px下的px值 / html里面的文字大小。

less文件中导入其他的less文件；@import  "其他的less文件"

***flexible.js+rem

flexible.js是淘宝出的，下载地址 https://github.com/amfe/lib-flexible；

需要引入文件：<script src="flexible.js"></script>

flexible把html划分为10等份。

cssrem插件，可以吧css中的值转换成rem；这个插件默认的html字体大小是16px；用的时候需要修改跟设计图一样的75培75

；

当屏幕超过750px时按照750px来算，要用更媒体查询重新设置html {font-size:75px!important; }

***响应式布局

前端开发框架Bootstrap；网站：bootcss.com   bootstrap.css88.com

<link href ="bootstrap.css" rel="stylesheet">

响应式开发的原理：通过媒体查询针对不同个宽度的设备进行布局和样式的设置。

通过一个父级作为布局容器，来配合子元素来改变布局样式。

bootstrap的使用步骤：1、创建文件夹的结构；吧bootstrap文件放到我们的bootstrap文件夹中（这个文件夹要自己创建）；2、创建html骨架；3.引入样式；4.书写内容

栅格化分为式12份；

*****布局的几个常用细节：

元素本身的布局：

元素居中：.XX { margin: auto; width: 50%; }

水平居中：margin: 0 auto;（前提是要先设置width；）如果没有设置  width 属性(或者设置 100%)，居中对齐将不起作用。

垂直居中：设置height: 150rpx; line-height: 150rpx;这两个要一样。

设置子元素的布局：

居中：text-align: center;（如果仅仅是为了文本在元素内居中对齐，可以使用 text-align: center;）

flex布局：是用来设置子元素的布局:display: flex; flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;   

绝对定位和相对定位：

relative：相对于原来位置偏移，元素设置此属性之后仍然处在文档流中，不影响其他元素的布局；宽高都没变，撑大了容器。相对定位不脱离自己原来的文档流，移动的位置是以自己左上角为基点来移动的。

absolute:元素会脱离文档流，如果设置偏移量，会影响其他元素的位置定位。元素在没有定义宽度的情况下，宽度由元素里面的内容决定，效果和用float方法一样。如果所有祖先元素都没有定位就以当前屏幕进行定位。如果子元素想在父元素上定位而父元素不想挪动位置，那么就为父元素设置相对定位且父元素的top和left为0。

static：自动定位（默认定位方式）唯一的用处就是用来取消定位。

fixd：固定定位，相对于浏览器窗口进行定位，脱离原来的文档流。

想要调整层叠元素的堆叠顺序时可以使用z-index属性来设置层叠顺序，z-index的默认值是0，取值越大元素的层叠顺序约靠上如果同样的值则根据文档顺序，后来者居上值只能是数值，不能加单位。

Display：

display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。

隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

块元素是一个元素，占用了全部宽度，在前后都是换行符。内联元素只需要必要的宽度，不强制换行。

显示为内联元素：display:inline; 

显示为块元素：display:block;

内联(行内)元素 不能设置宽高，但padding属性可以设置，需要注意的是行内元素不能设置margin-top和margin-bottom属性，但可以设置margin-left和margin-right属性。如果需要设置行内元素的margin-top或margin-bottom属性，必须将行内元素转换成内联块元素或块级元素。行内元素一般是内容的容器，而块级元素一般是其他容器的容器。一般情况下，行内元素只能包含内容或者其它行内元素，宽度和长度依据内容而定，不可以设置，可以和其它元素和平共处于一行；（a,b,strong,span,img,label,button,input,select,textarea）

块级元素可以包含行内元素和其它块级元素，且占据父元素的整个空间，可以设置 width 和 height 属性。默认宽度为100%。（header,form,ul,li,h,p,ol,table,article,div,hr,aside,figure,canvas,video,audio,footer）

行内块元素: display:inline-block;  支持宽高，自左向右排列,不独占一行,具备块元素和行内元素的所有特点.

注意：当元素浮动（float）后，不再区分行内和块元素，并且具备两者所有特点。

浮动float：

float浮动属于半脱离文档流，1、float浮动跟position:absolute一样拥有脱离文档流的功能，但是float虽然脱离了文档流但是仍然会占据位置，其他的文本内容会按照顺序继续排列——如果你对所有的元素都设置了浮动，你会看到这几个div并不会重叠，而是会顺序排列。