移动端的适配整理
一、移动端适配
方法一:viewport自适应屏幕宽度
在html中创建meta标签:页面的宽度等于屏幕的宽度。
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0">
方法二:框架搭建页面
- bootstrap 基于jQuery的响应工具,适用于移动端、PC、Pad等
- ElementUI(PC端)、MintUI(移动端) 基于vue组件库开发
二、移动端问题
(1)、1px 边框
方法一:伪元素 + transform 实现
.scale-1px{ 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 布局
<!DOCTYPE html> <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>