前端-移动web布局

视口标签主要属性如下

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

width=device-width视口宽度为设备屏幕宽度

initial-scale=1.0初始化1倍大小【即原大小】
user-scalable=no用户不可缩放窗口【即不能用二指禅缩放】，也可=0，

maximum=1.0,minimum=1.0最大最小倍数1

推荐使用normalize.css初始化

移动端-webkit-内核支持广泛，所以移动端只需要支持此内核即可

box-sizing: border-box;在布局中有很大作用

零：新增技能

1.背景颜色渐变

div {
    width: 600px;
    height: 200px;
    /* 默认从top向bottom进行颜色渐变，方向可以调节，如下，从左上角开始 */
    /* 必须加浏览器私有前缀，移动端多支持谷歌内核，加-webkit-准没错 */
    background: -webkit-linear-gradient(left top, red, blue);
}

2.媒体查询

/* 当屏幕width>=320px时候触发此条生效 */

@media screen and (min-width:320px) {
    body {
        background-color: pink;
    }
}
/* 当屏幕width>=640px时候触发此条生效 */
/* 可以继续跟and (max-width:979px) 看着清晰*/

@media screen and (min-width:640px) {
    body {
        background-color: purple;
    }
}
/* 当屏幕width>=980px时候触发此条生效 */

@media screen and (min-width:980px) {
    body {
        background-color: teal;
    }
}

/*  这样可以根据屏幕当前宽度，动态引入不同的css  */
<link rel="stylesheet" href="style320.css" media="screen and (min-width: 320px)">
<link rel="stylesheet" href="style640.css" media="screen and (min-width: 640px)">
<link rel="stylesheet" href="style980.css" media="screen and (min-width: 980px)">

推荐flex布局

一：流布局【百分比布局】

一般不定义宽度，直接写100%，内部元素利用%占据不同宽度。JD如此实现m.jd.com

二：Flex布局

父亲元素和儿子元素的共同设置

被flex布局中的元素，float，clear，以及vertical-align将会失效

父元素的6个属性

div {
    /* 父元素中需要先设置df */
    display: flex;
    /* 设置主轴 默认row column*/
    flex-direction: column;
    /* 设置是否换行显示 默认nowrap, wrap */
    flex-wrap: nowrap;
    /* 设置主轴上排列方式，flex-start，flex-end center space-around space-between*/
    justify-content: flex-start;
    /* 设置辅轴上的排列方式 【单行有效】 flex-start,flex-end,center, stretch*/
    align-items: center;
    /* 设置辅轴上的排列方式 【多行生效】 有6个 */
    align-content: flex-end;
    /* 定义主轴 和 单行多行的简洁写法 */
    flex-flow: row wrap;
    width: 800px;
    height: 260px;
    background-color: pink;
}

子元素的属性

span {
    /* 设置此子元素，在父元素剩余宽度中所占分数，可以是%写法来实现换行 */
    flex: 1;
    /* 默认0，设置此子元素，在父元素所有布局子元素中的位置，数字越小，越靠前 */
    order: -1;
    /* 设置此子元素自己在侧轴的布局，只有基本4样，前、后、中间、延展 */
    align-self: stretch;
}