移动端布局

单独制作移动端页面

全局样式

 1.移动端推荐使用：normalize.css（全局样式）
       下载地址：https://necolas.github.io/normalize.css/
 2.除此之外在添加三个属性：
        a./*在移动端浏览器默认的外观在ios上加上这个属性才能给按钮和输入框自定义属性*/
             input{
                     -webkit-appearance:none;
             }
        b./*禁用长安页面时的弹出菜单*/
             img，a{
             		-webkit-touch-callout:none;
             }
        c./*点击高亮我们需要清除  设置为transparent  完成透明*/
              *{
              		-webkit-tap-highlight-color:transparent;
              }
 3.推荐使用css3盒子模型
       加上：box-sizing:border-box;（padding和border不会再撑大盒子）
 4.给boby加个全局样式

1.流式布局（百分比布局）

 百分比布局=自己的宽度÷父元素的宽度
 里面有一些小属性：vertical-align:middle;图片和文字居中对齐

2.Flex布局（弹性布局布局）

给父级   display：flex；

1. 只设置主轴主轴的方向X方向
     flex-direction:row;(column  主轴变为Y轴)
2.此属性只适用于单行情况下：
    justify-content：flex-start（flex-end从尾部开始）；
                               （center居中对齐）
                               （space-around平均分配所有的空间）
                               （space-betwee先两边贴边，在平均分配所有的空间）	                              
3.设置侧轴侧轴的方向（居中）:
     align-items：center；
4设置是否换行默认子元素不换行:
     flex-wrap：nowrap（wrap 自动换行);(如果装不开，会缩小元素的宽度)
5.此属性只适用于多行情况下：
     align-content：flex-start（center居中对齐）
                              （space-around平均分配所有的空间）
                              （space-between上面贴着下面贴着）；
                                设置多行多行侧轴侧轴的方向
6.flex-flow 属性是flex-direction和flex-wrap属性的复合属性（简写）
     flex-flow：column wrap；
     
 给儿子   flex：1；（在剩余空间中，子项目占的份数份）
     align-self:flex-end;单独属性下来
     order属性定义项目的排列顺序默认0 （order：-1；）

3.rem+媒体查询布局+Less

em：是相对于父元素的字体大小来说的
rem：是相对Html的字体大小来说的，主要针对于字体和高根据屏幕的变化而变化（Html可以实现整体的控制）
媒体查询布局：@media可以针对不同的屏幕尺寸设置不同的样式
*语法规范@media mediatype and | not | only (media feature){}
mediatype:媒体类型 all（所有设备） print（用于打印机）scree（用于电脑屏幕，平板电脑，智能手机）
and | not | only：关键字
media feature： 媒体特性，必须有小括号包含

   	1. 这句话的意思就是：要我们屏幕上并且最大的宽度是539像素
   	 
	  	@media scree and (max-width:539px){
	   	
	   	} 
	   	@media scree and (min-width:540px) and (max-width:969px){
	   			
	   	}   
	   	@media scree and (min -width:970px){
	    			
	   	} 
			 
   2.引入资源（相当于写两套不同的css样式用媒体查询分别调用）

	3.Less是css预处理语言，它扩展了css的动态特性（css缺点手算：本身的px÷Htmlfont-size的px=rem）
	  官网：lesscss.cn

	  使用：新建一个后缀名未less的文件
	  
	            a.less变量    语法规范为  @变量名：值；

	            b.less编译（也就是安装插件之后自动生成新的css文件）；

	            c.less的嵌套（写好之后会在css里面自动生成）

	            d.less的运算

	          ********  e.rem的适配方案********

实际开发时的基本流程

方案一（使用rem+less）

1.引入视口标签和normalize公共样式

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

2.自己定义好less的公共样式以后就不需要在变了，然后记得引入

3.把公共样式导入所需要的页面（例如首页）

4.初始化body 宽度时以750px设计稿➗字体50px得到的15rem

方案二（使用：flexible.js）

github地址：https://github.com/amfe/lib-flexible

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200828102524787.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NtYWxsd2hpdGVfcGFwZXI=,size_16,color_FFFFFF,t_70#pic_center
不借助于Less