在index.html头部加入手机端自适应meta
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
一、移动端适配 rem
做移动端的适配我们就是要考虑,对于不同大小的手机屏幕,怎么动态改变页面布局中所有盒子的宽度高度、字体大小等。
这个问题我们可以使用相对单位rem。
那么什么是 rem?
rem(font size of the root element)是指相对于根元素html的字体大小的单位。简单的说它就是一个相对单位。设置 html 的 font-size 属性,rem 是根据它的大小来动态变化整个项目中使用 rem 单位的元素大小。
比如说:我们设置了根元素字体大小为37.5px,之后如果有一个盒子宽为75px,则,我们可以给盒子设置成2rem。
那么接下来,我们要做得就是根据屏幕大小动态改变根元素的font-size了
比如说,有一个宽高都为2rem的盒子。当在一个很小的屏幕上展示的时候,我们把font-size设置为37.5px。那么这个盒子展示出来的就是75px * 75px的正方形。当在一个大屏幕上展示的时候,我们把font-size设置成75px,那么这个盒子展示出来的就是150px乘以150px的正方形。
1. rem+动态html的font-size
1.rem单位是相对于html元素的font-size来设置的,那么如果我们需要在不同的屏幕下有不同的尺寸,可以动态的修改html的font-size尺寸。
2.比如如下案例:
设置一个盒子的宽度是2rem;
设置不同的屏幕上html的font-size不同;
3.这样在开发中,我们只需要考虑两个问题:
问题一:针对不同的屏幕,设置html不同的font-size;
问题二:将原来要设置的尺寸,转化成rem单位;
2. rem的font-size尺寸
2.1 方案一:媒体查询
- 可以通过媒体查询来设置不同尺寸范围内的屏幕html的font-size尺寸;
- 缺点:
1.我们需要针对不同的屏幕编写大量的媒体查询;
2.如果动态改变尺寸,不会实时的进行更新;(媒体查询只能修改某个范围区间里面的html的字体大小,在这个区间里面,盒子大小都是一样的,我们是希望实时改变的)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@media screen and (min-width: 320px) {
html {
font-size: 20px;
}
}
@media screen and (min-width: 375px) {
html {
font-size: 24px;
}
}
@media screen and (min-width: 414px) {
html {
font-size: 28px;
}
}
@media screen and (min-width: 480px) {
html {
font-size: 32px;
}
}
.box {
width: 5rem;
height: 5rem;
background-color: orange;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
2.2 方案二:编写js代码
- 如果希望实时改变屏幕尺寸时,font-size也可以实时更改,可以通过js代码;
- 方法:
1.根据html的宽度计算出font-size的大小,并且设置到html上;
2.监听页面的实时改变,并且重新设置font-size的大小到html上;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/hy_flexible.js"></script>
<style>
body {
font-size: 16px;
}
.box {
width: 5rem;
height: 5rem;
background-color: orange;
}
p {
font-size: 0.5rem;
}
</style>
</head>
<body>
<div class="box">
</div>
<p>我是文本</p>
<!-- 动态的修改html的font-size -->
<span>哈哈哈哈哈哈</span>
</body>
</html>
js
// 1.获取html的元素
const htmlEl = document.documentElement;
function setRemUnit() {
// 2.获取html的宽度(视口的宽度) clientWidth是对象可见的宽度,不包滚动条等边线,会随窗口的显示大小改变。
const htmlWidth = htmlEl.clientWidth;
// 3.根据宽度计算一个html的font-size的大小
const htmlFontSize = htmlWidth / 10;
// 4.将font-size设置到html上
htmlEl.style.fontSize = htmlFontSize + "px";
}
// 保证第一次进来时, 可以设置一次font-size
setRemUnit();
// 当屏幕尺寸发生变化时, 实时来修改html的font-size
window.addEventListener("resize", setRemUnit);
// 监听页面初次加载时候的事件
window.addEventListener("pageshow", setRemUnit);
/*
// 防抖
function debounce(fn,delay = 20){
var timer = null;
return function(...args){
if(timer){
clearTimeout(timer)
}
timer = setTimeout(()=>{
fn.apply(this,args)
}, delay)
}
}
window.addEventListener("resize", debounce(setRemUnit,50));
*/
3. vue项目中使用 postcss-pxtorem
1.css代码里写的px单位会在浏览器上展示为rem :postcss-pxtorem
2.解决屏幕尺寸发生变化的时候给根节点设置值 : amfe-flexible / lib-flexible
第一步:首先,在项目中引入css转rem的插件
npm install postcss-pxtorem --save
在项目配置postcss-pxtorem,可在vue.config.js、.postcssrc.js、postcss.config.js其中之一配置,权重从左到右降低,没有则新建文件,只需要设置其中一个即可:
module.exports = {
plugins: {
"postcss-pxtorem": {
"rootValue": 37.5, // 设计稿宽度的1/10,代表 1rem=37.5px
"propList": ["*"], // 需要做转化处理的css属性 * 就是所有属性都要转换,如`hight`、`width`、`margin`等,`*`表示全部
"exclude": /node_modules/i, // 这里表示不处理node_modules文件下的css
}
}
}
有了这个之后,我们就不用每次去手动计算多少px需要写成多少rem了。比如我们拿到的设计稿宽度是375px(上边代码的rootValue我们写成37.5) ,里面有一个375px*375px的正方形。我们直接写375px就行,这个插件会自动帮我们计算width和height是10rem
那么,怎么动态改变根元素的字体大小呢?
第二步:引入另外一个插件,amfe-flexible/lie-flexible
npm install amfe-flexible --save / npm install lie-flexible --save
-flexible会自动在html的head中添加一个 meta name="viewport"
的标签,同时会自动设置html的font-size为屏幕宽度除以10,也就是1rem等于html根节点的font-size。假如设计稿的宽度是750px,此时1rem应该等于75px。假如量的某个元素的宽度是150px,那么在css里面定义这个元素的宽度就是 width: 2rem。但是当分辨率大于某个特定值时,它便不再生效。
直接在main.js中引入不需要其他配置
这样就可以做到不同的屏幕大小根元素font-size不同啦。 然后页面布局我们使用的又是rem单位,那么盒子大小也就不同啦。
需要注意:如果我们想写死页面中的某个长度大小,比如border-radius为1px,我们只需要使用大写的PX就可。
字体变小问题,解决方案:
1.直接将出现问题的单位换成 rem/要转换的单位
2.修改插件的配置过滤掉不需要适配的样式
二、其它适配方案
当前流行的几种适配方案
-
方案一:百分比设置(不推荐)
-
因为不同属性的百分比值,相对的可能是不同参照物,所以百分比往往很难统一
-
所以百分比在移动端适配中使用是非常少的
-
-
方案二:rem单位+动态html的font-size(上面已讲解)(推荐)
-
方案三:vw单位(推荐)
-
方案四:flex的弹性布局
vw 适配方案
vw ,就是根据窗口的宽度,分成100等份,100vw就表示满宽,50vw就表示一半宽。(vw 始终是针对窗口的宽),同理,vh则为窗口的高度
这里的窗口分成几种情况:
在桌面端,指的是浏览器的可视区域(即window.innerWidth/window.innerHeight大小,不包含任务栏标题栏以及底部工具栏的浏览器区域大小)
像vw、vh,比较容易混淆的一个单位是%,不过百分比宽泛的讲是相对于父元素。
100vw 相当于整个视口的宽度 innerWidth,1vw 相当于视口宽度的 1%,将 px 转换为 vw 即可完成适配,其实上面的 rem 就是模仿 vw 方案
vw相比于rem的优势:
-
不需要去计算 html 的 font-size 大小,也不需要去给 html 设置 font-size
-
不会因为设置 html 的 font-size 大小,而必须再给 body 设置一个 font-size 防止继承
-
因为不依赖 font-size 的尺寸,所以不用担心某些原因的 html 的 font-size 尺寸被篡改,导致页面尺寸混乱
-
vw 更加语义话,1vw 相当于 1/100 viewport 的大小
-
rem 事实上作为一种过渡的方案,它利用的也是 vw 的思想
三、css中二倍图,三倍图的使用
基本概念
比如你需要一个30pt*30pt的图标,那么这时你就需要跟美工(美术工程师)要三个文件:
一个是30px*30px的PNG图片,用原名来命名即可,例如sample.png。
一个是60px*60px的PNG图片,这个要用原名@2x来命名,例如image@2x.png。
一个是90px*90px的PNG图片,这个要用原名@3x来命名,例如image@3x.png。
这样把这三张图片导入进工程,你会神奇地发现,这三个文件居然会被iOS统一识别为sample.png
应用场景
1x的图标用于1:1的屏幕,仅作为了解,现在一般都是直接使用二倍图及三倍图。
2x的图标用于1:2的屏幕,机型如iPhone 4S、iPhone 5、iPhone 5s、iPhone 6及后续的iPad等。
3x的图标目前应用于1:3的屏幕,即iPhone 6Plus,这个就比较特殊了,因为苹果为了方便开发者,想出来一个简便的实现方案,将2208*1242分辨率的图像压缩输出在1920*1080的屏幕上。
像素:PX
px就是pixel的缩写,pixel即像素,它不是自然界的长度单位。px是就是一张图片中最小的点,一张位图就是由这些点构成的。
像素是构成数码影像的基本单元,通常以像素每英寸PPI(pixels per inch)为单位来表示影像分辨率的大小。因此,像素也是指分辨率
/*默认大小*/
.photo {background-image: url(image100.png);}
/* 如果设备像素大于等于2,则用2倍图 */
@media screen and (-webkit-min-device-pixel-ratio: 2),
screen and (min--moz-device-pixel-ratio: 2) {
.photo {
background-image: url(image200.png);
background-size: 100px 100px;
}
}
/* 如果设备像素大于等于3,则用3倍图 */
@media screen and (-webkit-min-device-pixel-ratio: 3),
screen and (min--moz-device-pixel-ratio: 3) {
.photo {
background-image: url(image300.png);
background-size: 100px 100px;
}
}
.photo {width:100px;height:100px;}
scss写法
@mixin bg-image($url) {
background-image: url($url + "@2x.png");
@media (-webkit-min-device-pixel-ratio:3),(min-device-pixel-ratio:3){
background-image: url($url + "@3x.png")
}
}
css样式中调用 bg-image 方法
div{
width:30px;
height:20px;
background-size:30px 20px;
background-repeat:no-repeat;
@include bg-image('special_1');
}
方法二:直接使用 IMG 的 SRCSET 属性
<img width="100" height="100" src="image100.png" srcset="image200.png 2x,image300.png 3x"/>
四、uniapp 单位rpx ,设计稿尺寸px处理方式
1.使用postcss-px2rpx 插件做全局的单位转换
npm install postcss-px2rpx -D
2.postcss.config.js修改
module.exports = {
plugins: {
'postcss-px2rpx': {
// 设计稿宽度,默认750
designWidth: 750,
// 需要转换的最小像素值,默认1px
minPixelValue: 1,
// 转换的精度,默认5
decimalPlaces: 5
}
}
}
3.配置好后就可以直接在css文件中用px单位
在组件样式或全局样式中使用 px 单位,如:
.box {
width: 100px;
height: 50px;
}
4. 构建项目:
使用 uni-app 自带的 HBuilderX 开发工具进行构建,或者在命令行中输入以下命令进行构建:
npm run dev:h5 // 构建 H5
npm run dev:mp-weixin // 构建微信小程序
构建完成后,所有的 px 单位都会自动转换成 rpx 单位。