一、移动端适配 方法一：viewport自适应屏幕宽度 在html中创建meta标签：页面的宽度等于屏幕的宽度。 meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0" 方法二：框架搭建页
一、移动端适配
方法一：viewport自适应屏幕宽度
在html中创建meta标签：页面的宽度等于屏幕的宽度。
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0">
方法二：框架搭建页面
二、移动端问题
（1）、1px 边框
方法一：伪元素 + transform 实现
position: relative;
}
.scale-1px::after{
content: '';
position: absolute;
bottom: 0;
left:0;
right:0;
border:1px solid red;
transform: scaleY(0.5);
}
方法二：view + rem 实现
（2）、移动端布局方式
方法一：响应式布局
流式布局 + 媒体查询
方法二：弹性布局
flexbox
方法三：rem 布局
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--移动端的视口配置 + rem的设置 ： 建议使用内联js -->
<script>
//设置适口及缩放比例，目的：实现像素1:1还原
var ratio = 1 / (window.devicePixelRatio||1); // window.devicePixelRatio:浏览器的像素比。
document.write('<meta name="viewport" content="width=device-width,initial-scale='+ratio+',minimum-scale='+ratio+',maximum-scale='+ratio+',user-scalable=no" />')
//设置html字体大小
var size = document.documentElement.clientWidth/7.5; //以750尺寸计算
//要设置的html的font-size是100px,即1rem
document.getElementsByTagName('html')[0].style.fontSize = size + 'px';
</script>
</head>
<body>
code...
</body>
</html>