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

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

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

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

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

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

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

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

initial-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。

***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 [email protected] -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；

需要引入文件：

flexible把html划分为10等份。

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

；

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

 

***响应式布局

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

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

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

 

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

栅格化分为式12份；