目录
- 移动端的适配方案
- 百分比适配
- viewport缩放适配
- DPR缩放适配
- rem适配
- hotcss适配(使用dpr+rem,简单好用)
- vw/vh适配(为适配而生，最优方案)
移动端的适配方案
不同的尺寸的手机设备上，页面相对合理的展示（自适应）或者保持统一效果的等比缩放
百分比适配
根据父级计算百分比，需要配合其他布局使用
<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
html,body{
width:100%;
.container{
width:100%;
div{
float:left;
width:25%;
}
}
}viewport缩放适配
把所有机型的css像素设置成一致的,需要动态设置
缩放比公式: 缩放比 = css像素/375
<script>
(function(){
//获取CSS像素,需要确保缩放为1(minimum-scale=1,maximum-scale=1)
let pageWidth = document.documentElement.clientWidth;
let pageWidth = window.innerWidth;
let pageWidth = window.screen.width;
//求缩放比
var scale = pageWidth / 375 ;
//动态设置缩放比
给meta标签设置id,用来获取元素
document.getElementById("metaId").content=`initial-scale=${scale},minimum-scale=${scale},maximum-scale=${scale},user-scalable=no`;
*注意,一定不要设置width=device-weidth,以及一定要设置最大最小缩放比
})()
</script>缺陷:大设备图片失真,缩放比为小数容易出现误差等.
DPR缩放适配
把CSS像素缩放成与设备像素一致的尺寸
和viewport适配类似(反推)，根据dpr的值，把视口缩放到和物理像素，也就是把css像素的值设置成物理像素，让所有设备都变成物理像素和css像素1:1的结果
公式: dpr = 视口宽度/375
<script>
(function(){
//先要检查是否有这个标签，有则修改，无则创建
var meta = document.querySelector("meta[name='viewport']");
var scale = 1/window.devicePixelRatio;
if(!meta){
meta = document.createElement("meta");
meta.name="viewport";
mate.content=`width=device-width,initial-scale=${scale},minimum-scale=${scale},maximum-scale=${scale},user-scalable=no`
document.head.appendChild(meta)
}else{
//修改
meta.setAttribute('content',`width=device-width,initial-scale=${scale},minimum-scale=${scale},maximum-scale=${scale},user-scalable=no`)
}
})()
</script>rem适配
rem的本质是计算元素占屏幕的百分比,单位rem需要设置到html标签上，代表屏幕每一列的宽度
设置rem的方式
- 使用javascript动态设置方法1
<.script> (function(){ var root = document.documentElement; //根元素html var width = window.clientWidth;//设备的宽度 root.style.fontSize = width/20+'px'; //20是指列，可随意设置，但一定要方便计算 })() </.script> ______________________________________________________________ 切图流程: 1.先设置rem 2.量出元素在设计稿中的尺寸 3.使用这个尺寸除以DPR(得看你使用的哪个设备做基准) 4.然后换算成rem，这个rem值就是这个元素的值了 元素在设计稿的尺寸/DPR/列 就是最终结果 - 使用javascript动态设置rem方法二（推荐,重点推荐其扩展方法）
<script> //此方法对性能有优化 (function(doc,window,designWidth){ //文档,window,设计稿尺寸 const root = doc.documentElement; const refreshRem = () => { const clientWidth = root.clientWidth; if(clientWidth >= designWidth){ root.style.fontSize = '100px'; //给宽度一个最大值，如果设备的宽度已经超过设计稿的尺寸了，统一按一个值去计算(第三个参数) }else{ root.style.fontSize = 16 * clientWidth / 375 +'px'; //这么写是为了以iphone6为基准,iphone6的clientwidth就是375 //设备比iphone6宽的rem就是1的xx倍，小的就是0.xx倍 //并且iphone6的dpr为2，也是人的眼睛能分辨的极限了（高清屏），超过了人眼其实已经分辨不出来和高清屏的区别了 //扩展方法: (重点推荐此方法)root.style.fontSize=100*(clientWidth/designWidth)+'px' //这种后续不需要对dpr处理,因为cw/dw已经对dpr处理了 //此方法易于换算 //此方法即vh、vw的原理，可使用vh/vw适配 } } doc.addEventListener('DOMContentLoaded',refreshRem) })(document,window,750) </script> - 使用媒体查询设置rem（了解）
@media screen and (min-width:xxxpx){ html{ font-size:xxxpx } }
根据屏幕设备的区间(min-width)来设置font-size的值
ios9不支持ES6,要么使用es5写法，要么后续使用bable处理
hotcss适配(使用dpr+rem,简单好用)
其使用了dpr的原理和rem结合
开源项目地址:??直达
优点：直接使用在设计图中量出来的尺寸，无需进行计算转化,如元素量出来宽是187.5px,那么在scss/less文件中写为:
width:px2rem(187.5);vw/vh适配(为适配而生，最优方案)
vw、vh是一个css单位(Viewport‘s Width,Viewport‘s Height)
vmin 取vw\vh中最小的值
vmax 取vw\vh中最大的值
横竖屏切换时，它们会互换
vw/vh是将屏幕宽高都分成100份，1vw为屏幕1%的宽度，1vh为屏幕1%的高度
优点：为适配而生，逮着就用，不需要转化
存在兼容性问题: IOS>=8 Android>=4.4
方案一：全页面使用vw
方案二: 通过vw设置根节点字体，然后使用rem适配，无需使用js
原文地址：https://www.cnblogs.com/hhyf/p/11875823.html
时间： 2024-11-05 18:29:46