视口标签主要属性如下
<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;
}