移动端适配的几种方案:
rem方案
rem+vw方案
百分比
基于媒体查询的响应式设计
rem方案的原理:
rem是相对长度单位,相对html元素(文档根元素doucment.documentElement)计算值的倍数。根据屏幕宽度设置html标签的font-size,在布局时使用rem单位,达到自适应的目的,是弹性布局的一种实现方式。
当页面全屏显示时,设置 html 默认字体大小为100px,则子元素中1rem就等于100px,相当于设计稿中的1px等于0.01rem,使用的时候设计稿中的尺寸直接除以100,100px就是1rem,10px就是0.1rem。
PC端
export default class Rem {
static init(){
//设置默认尺寸
Rem.defaultStyle();
//缩放后,重新计算html字体大小
Rem.resizeHandler();
//监听浏览器缩放事件
window.addEventListener("resize", Rem.resizeHandler);
}
//计算html字体大小
static resizeHandler() {
let contW = Math.floor(document.documentElement.clientWidth);
let fontS = (contW / screen.width) * 100;
document.documentElement.style.fontSize = fontS + "px";
}
//设置html默认字体为100px body字体为16px
static defaultStyle(){
document.documentElement.style.fontSize = "100px";
document.body.style.fontSize = "16px";
}
//px 转换成 rem
static getRem(size) {
var fontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
return size / fontSize;
}
}
移动端
(function(w){
var docEl=w.document.documentElement;
var timer;
function refersh(){
var width=docEl.getBoundingClientRect().width;
if(width>750) width=750;
var rem = width/7.5;
docEl.style.fontSize=rem+"px";
}
w.addEventListener("resize",function(){
timer && clearTimeout(timer);
timer=setTimeout(refersh,400)
})
w.addEventListener('pageshow', function () {
timer && clearTimeout(timer);
timer = setTimeout(refersh, 400)
})
})(window)
rem+vw方案
vw/vh方案计算方便,能够很好地实现适配效果,但是存在一定的兼容问题,将vw/vh方案和rem方案相结合,设置html元素的font-size单位为vw,然后在布局中直接使用rem单位。
例如,设计稿的宽度为750px,则1vw=7.5px,为了方便计算,我们将html元素的font-size大小设置为100px,也就是13.333vw=100px。
html{font-size:13.333vw}
1
设置html{font-size:13.333vw},在样式代码中1rem=13.333vw=100px,即1rem等于设计稿上的100px,使用的时候除以100,直接小数点向左移动2位,1rem等于100px,那么10px就是0.1rem。
这样的好处是不需要使用postcss-pxtorem 插件来转换单位,如果使用插件,想写px的地方还需要设置propList或者selectorBlackList。使用这种方案的话就不存在这个问题了,想用相对单位就写rem,想用绝对单位就写px,不需要其他的设置。
这种方案的优点:从rem方案过渡到vw,只是需要通过改变根元素字体大小的计算方式,将单位改成vw,不需要其他处理。
这种方案的缺点:,这种方案只对手机的兼容性很好,ipad或者是pc端的效果就不是很好。因为根节点的字体单位使用的是vw,当设备的宽度越来越大时,使用rem做单位的元素也会越来越大,以至于在ipad或者是pc上展示的效果会很差。
解决方案:当屏幕过大的时候,我们可以使用媒体查询来限制根元素的字体大小,实现对页面的最大最小宽度限制。
例如,在样式中加上这句代码,在pc上效果也很不错了。
@media (min-width: 560px) {
html {
font-size: 54px;
}
}
.百分比方案
相对于父元素的宽度,使用百分比的单位来定义子元素的宽度。子元素的高度使用px来定义,使用max-width/min-width 控制子元素的最大最小尺寸。
属性 参考对象
height/width 相对于子元素的直接父元素
top/bottom/left/right 相对于有定位属性的父元素
padding/margin 相对于直接父元素
border-radius 相对于自身
这种方式的优点是原理简单,不存在兼容性问题。
缺点是
字体大小无法随着屏幕大小变化而改变;
设置盒模型的不同属性时,其百分比设置的参考元素不唯一,容易使布局问题变得复杂。
基于媒体查询的响应式设计
基于媒体查询的响应式设计,响应式设计,使得一个网站可以同时适配多种设备和多个屏幕,让网站的布局和功能随用户的使用环境(屏幕大小、输出方式、设备/浏览器)而变化,使其视觉合理,交互方式符合习惯。
css3中的@media,通过给不同分辨率的设备编写不同的样式规则实现响应式布局,使一个网站可以在不同尺寸的屏幕下显示不同的布局效果。主要用来解决不同设置不同分辨率之间的兼容问题,一般是指pc、平板、手机设备之间较大的分辨率差异。实现上不局限于具体的方案,通常是结合流式布局和弹性布局方案。比如给小屏幕手机设置@2x图,给大屏手机设置@3x图。
@media only screen and (min-width: 375px){
/样式1/
}
@media only screen and (min-width: 750){
/样式2/
}
1
2
3
4
5
6
这种方案的优点是
能够使网页在不同设备、不同分辨率的屏幕上呈现合理布局,不单单是样式伸缩变换。
缺点是
如果要匹配足够多的设备与屏幕,一个web页面需要多个设计方案,工作量比较大。
通过媒体查询技术需要设置一定量的断点,到达某个断点前后的页面发生突兀变化,用户体验不太友好。