目录
- 移动端的适配方案
- 百分比适配
- 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