说起移动端适配可能会有很多适配方案。
最开的适配方案回顾:
1.if(/Android (\d+\.\d+)/.test(navigator.userAgent)){
var version = parseFloat(RegExp.$1);
if(version>2.3){
var phoneScale = parseInt(window.screen.width) / 640;
document.write('');
}else{
document.write('');
}
}else{
document.write('');
}
上边的这种方式还好，让开发者可以正常以px单位去写移动端。如果你用火狐测试就会发现，因为userAgent检测不到Android的时候你写的东西在火狐测试上会乱掉。
2.通过media 去 控制不同屏幕宽度下的根元素的大小。假如设计稿的宽度是375，media中设置的根元素为18px，则假如一个元素在设计稿中width为180px,则180/18=10rem
@media screen and (min-width: 320px) {
html {
font-size: 16px;
}
}
@media screen and (min-width: 375px) {
html {
font-size: 18px;
}
}
@media screen and (min-width: 414px) {
html {
font-size: 20px;
}
}
@media (min-width: 750px) {
html {
font-size: 36px;
}
}
除了以上这两种方案 可能还有很多。下边介绍一种很简单的适配方案
假如设计稿的宽度为375(iphone6)，则375/100=3.75， 除以100是为了换算rem的时候简单些
//根据JS设置根元素大小
document.documentElement.style.fontSize = deviceWidth /3.75 + 'px';
根元素如下:
假如设计稿中一个元素宽度为100px 则在编写css的时候他的 width:1rem(因为要除以100)；以此类推。在编写css的时候单位换成rem需要除以100。
但是！字体不推荐写成rem。
请对比下边两个页面
1.1
1.2
图1.1中 设置 外观/内饰:红色/黑色 这一行字体大小为0.14rem;
图1.2中 设置 外观/内饰:红色/黑色 这一行字体大小为14px;
会发现font-size单位为rem 字体在同一屏幕下显示偏小。而以px为单位会正常显示。
如果特殊情况需要 你也可以通过media去控制在某分辨率下的根元素大小。
我们清理下使用流程：
1看视觉稿的宽度。假如视觉稿宽度为375 则375/100=3.75 得到这个比例
2.<meta name="viewport" content="initial-scale=1,maximum-scale=1,minimum-scale=1" 这个meta必须添加
3.document.documentElement.style.fontSize = deviceWidth /3.75 + 'px'; 这段JS必须加上
4.CSS单位换位rem 视觉稿给你的标注都要除以100 例如视觉稿宽度显示100px 则你要写0.1rem
小坑:
高度不需要自适应的话建议根据视觉稿把高度写上。 否则会出现 在IOS设备显示上没问题，安卓显示下 字体会偏上。
*如果屏幕大于640则deviceWidth为640 或者是说你让路径跳到PC版本上，这里是你自己控制我不管了哦~
var deviceWidth = document.documentElement.clientWidth;
console.log(deviceWidth);
if(deviceWidth > 640) deviceWidth = 640;
document.documentElement.style.fontSize = deviceWidth /3.75 + 'px';
网友评论