移动端相关概念

相关概念

设计稿的宽为750px
去掉头部40px状态栏显示

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

viewport是视口

user-scalable=no 禁止用户缩放

用像素写的移动端页面， 设计稿的宽/比值 dpr是2倍,手动除2

配合box-sizing:border-box

相关代码

*{
	margin: 0;
	padding: 0;
}
html{
    // 750px 设计稿则/7.5   720设计稿则/7.2
	font-size: calc(100vw / 7.5);
	background: #f5f5f5;
}
/* 用rem写移动端 需要将行内块元素转为块元素 */
span,i,a,em,b,strong,img,input{
	display: block;
}

/* input输入框 改变placeholder字体颜色
input::-webkit-input-placeholder{
    color:#fff;
}
inut{
	outline:none;  
	border:none;
}