移动端适配(rem)
2019-08-28 本文已影响0人
好名字都让你们用了
手机的分辨率不同,如何在不同的手机上保持显示相同的表现,常见的方案有两种:
1: 使用响应式布局,
(1):通过媒体 查询@media来实现
- 媒体查询可以让我们根据设备显示器的特性(如视口宽度,屏幕比例,设备方向,横向或纵向)为其设定css样式.(即根据设备的不同的宽度为同一页面设置不同的css样式)
(2)写两套代码,一套Pc端,一套移动端,通过user Agent判断用户使用的设备,跳转到相应的网站
2:使用rem
-
(1)元素的度量单位
px:相对长度单位.像素是相对于显示器分辨率而言的.
em:表示相对尺寸,其相对于当前对象文本的font-size(相对于父元素)
rem:是css3新增的一个相对单位,其参考对象是根元素<html>的font-size, -
(2)rem的计算公式
元素的宽度(高度)=html的font-size*rem -
(3)使用rem进行移动端适配的原理
-
第一步:根据iphone的宽度(375px)作为参考.给他的跟严肃节点设置font-size大小
-
第二部:获取手机屏幕宽度,根据屏幕宽度,以iphone6作为参照物进行等比例缩放
3:在项目中配置rem
第一种方法:
在html的头部加上以下代码,元素单位全部用rem来表示
<script>
function resetWidth() {
// 兼容ie浏览器 document.body.clientWidth
var baseWidth = document.documentElement.clientWidth || document.body.clientWidth;
console.log(baseWidth);
// 设置跟标签字体大小
document.documentElement.style.fontSize = baseWidth * 100 / 375 + 'px'
}
resetWidth();
window.addEventListener('resize', function () {
resetWidth();
})
</script>
<style>
html {
font-size: 100px;
}
body {
font-size: 16px;
}
</style>
第二种方法:
-
安装
amfe-flexible,作用是根据手机大小设置根标签字体npm i amfe-flexible --save-dev -
在
main.js中导入import 'amfe-flexible' -
安装
postcss-pxtorem// 把px编程rem
less,scc(预处理语言) => css => postcss(后处理语言)npm i postcss-pxtorem --save-dev -
在vue-cli3项目根目录创建vue.config.js,添加以下代码
const pxtorem = require("postcss-pxtorem"); module.exports = { css: { loaderOptions: { postcss: { plugins: [ // autoprefixer(), pxtorem({ rootValue: 37.5, propList: ["*"] }) ] } } } };
