WebApp开发中关于屏幕适配的那点事儿

最新推荐文章于 2024-03-13 12:18:29 发布

仲夏夜之恋

最新推荐文章于 2024-03-13 12:18:29 发布

阅读量4.3k

点赞数 2

分类专栏： WebApp开发文章标签： web app flexible 屏幕适配

本文链接：https://blog.csdn.net/wtunique/article/details/53783561

版权

WebApp开发专栏收录该内容

8 篇文章 0 订阅

订阅专栏

小编近来在研究混合App的开发，其中遇到一个问题就是针对不同手机屏幕需要进行适配。查阅了相关资料后做了一些总结，希望对大家能有帮助。

首先我们需要了解一些基本的概念，什么是物理像素、设备独立像素、设备像素比等等。在这里我就不给大家解释了，推荐给大家一个连接，写的很nice。移动端高清、多屏适配方案

OK，了解完基本的概念，接下来给大家提供几种适配方法：

一、使用rem来做适配

我们都知道，rem是将根节点html的font-size的值作为整个页面的基准尺寸，默认html的font-size是16px，即1rem=16px,如果div宽度为32px，你可以设为2rem。当我们把html的font-size设为20px时，1rem=20px,那么32px=1.6rem了，基于此我们要做的就是：针对不同手机屏幕尺寸和dpr（设备像素比）动态改变根节点html的font-size大小（基准值）。这里有一个公式：

rem= document.documentElement.clientWidth* dpr/10

说明：

1.乘以dpr，是因为页面有可能为了实现1px border页面会缩放(scale) 1/dpr 倍(如果没有，dpr=1),。（如果你看不懂请先看上面的链接，了解基本概念）

2.除以10，是为了取整，方便计算(理论上可以是任何值)

所以就像下面这样，html的font-size可能会：

iphone3gs: 320px / 10 = 32px

iphone4/5: 320px * 2 / 10 = 64px

iphone6: 375px * 2 / 10 = 75px

这样说大家可能有些难以理解，让我来用图跟大家解释一下我们究竟要做什么。

我们以iphone5为例，手机屏宽度为320*2=640px。我们将其分成10份，得到font-size基准值rem=640/10=64px

右面的图片是视觉稿，视觉稿是前端开发之前，美工给我们的psd文件，我们要根据视觉稿去进行样式的布局。为了能够给不同手机屏幕进行适配，我们将设计稿也分成10份，

得到每一份rem=75px.之后呢两个图虽然宽度不同，但是经过转换后都有相同的rem个数了。最后我们将视觉图中所有的px都转换成rem为单位就可以了，在html页面中我们使用 rem而不给某个属性设为具体的px值。

对于视觉稿上的元素尺寸换算也非常简单，只需要原始的px值除以rem基准值即可。例如比例视觉稿中的图片，其尺寸是176px*176px,转换成rem为176/75=2.34667，即尺寸为2.34667rem*2.34667rem。我们在写前端的时候只需要设置图片的宽和高为2.34667rem即可，是不是很方便。

但是！！！问题并没有结束，我们需要为html设置一个合适的font-size.也就是rem值，这个很关键。小编搜集了网上的一些资料有两种方式去实现，一种是CSS方式，一种是JavaScript方式。有兴趣的同志可以查阅一下相关材料，在这里不赘述。

不过小编找到了更好的办法，使用阿里手淘团队的lib-flexble库，这个库是用来解决H5页面终端适配的。可以点击这里下载相关文档

使用方法：lib-flexible库的使用方法非常简单，只需要在Web页面的<head></head>中添加对应的flexible_css.js,flexible.js文件：

第一种方法：将文件下载到你的项目中，然后通过相对路径添加：

    <script src="build/flexible_css.debug.js"></script>
    <script src="build/flexible.debug.js"></script>

第二种方法：直接加载阿里CDN文件

    <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>

如此一来，页面中的元素，都可以通过rem单位来设置，他们会根据html元素的font-size值做相应的设计，从而实现屏幕的适配效果。如果想要深究flexible请猛戳这里！

（PS，flexible是将视觉稿分成了10份，即上面那个公式中的分母为10）

引用了文件之后，将视觉稿中的px转换为rem，在你的样式中直接应用就好了。因为flexible已经为我们设置了font-size的大小了。这种方法简单，实用，只需要加一两行代码即可。

同样，如果没有那么好的条件，有美工MM为我们设计视觉稿呢？我们也可以用这种方法，为html设一个font-size基准值，之后根据这个基准值去进行适配，道理和上面的相同，只不过需要你自己去设计布局了。

这里还要注意一点：文本字号不建议使用rem。

对于这个问题，设计师原本的要求是这样的：任何手机屏幕上字体大小都要统一。我们希望看到的文本字号是相同的，如此一来就决定了在制作H5页面中，rem并不适合用在段落文本上。所以在Flexible整个适配方案中，考虑文本还是使用px作为单位。只不过使用[data-dpr]属性来区分不同dpr下的文本字号大小。

div { 
     width: 1rem;
     height: 0.4rem; 
     font-size: 12px; // 默认写上dpr为1的fontSize 
} 
[data-dpr="2"] div {
     font-size: 24px; 
} 
[data-dpr="3"] div {
     font-size: 36px; 
}

当然这只是针对描述性的文本，比如说段落文本，但有时候文本的字号也需要分场景，比如在项目中有一个slogan，业务方希望这个slogan能根据不同的终端适配，针对这种场景，完全可以使用rem计量单位。

移动端布局，为了适配各种大屏手机，目前最好用的方案莫过于使用相对单位rem。

接下来给大家补充一些其他的方法

二、使用meta标签法

理论上讲使用这个标签是可以适应所有尺寸的屏幕的，但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。
我们先来看看该标签的含义：
```
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
```
这里的content中的“width” 这个width指的是虚拟窗口的宽度。了解宽度之后，对后续的各种scale，就应该知道是谁与谁的比例，是虚拟窗口宽度 / 页面宽度，这样就会有问题出现，安卓设备尺寸差异很大，光主流的就有宽度为 320、480、720、1080 等各种尺寸而以上标签只能支持一种尺寸，当然有些浏览器会自动缩放使其适应屏幕，但这不是统一标准，正确的做法是用js动态生成此标签，当然，应该先获取屏幕尺寸。

JS核心代码：

var phoneWidth = parseInt(window.screen.width);
var phoneScale = phoneWidth/750;
var ua = navigator.userAgent;
if (/Android (\d+\.\d+)/.test(ua)){
var version = parseFloat(RegExp.$1);
if(version>2.3){
document.write('<meta name="viewport" content="width=750, minimum-scale = ‘+phoneScale+‘, maximum-scale = ‘+phoneScale+‘, target-densitydpi=device-dpi">');
}else{
document.write('<meta name="viewport" content="width=750, target-densitydpi=device-dpi">');
}
} else {
document.write('<meta name="viewport" content="width=750, user-scalable=no, target-densitydpi=device-dpi">');
}

三、百分比适配

用百分比做适配的方法是子元素相对于父元素的百分之多少，比如父元素的宽度为100px;设置子元素的宽度可为60%;这时子元素的宽为60px;如父元素的宽度改为200px时，这时子元素的宽就是120px;
所以可将body默认宽度设置为屏幕宽度（PC中指的是浏览器宽度），子孙元素按百分比定位（或指定尺寸）就可以了，这只适合布局简单的页面，复杂的页面实现很困难。

四、CSS3媒体查询

采用CSS3媒体查询可以为不同的媒体设置不同的css样式，这里的“媒体”包括页面尺寸，设备屏幕尺寸等，比如我们要为宽度大于375px的页面中的class="content"的元素设置样式，可以这样写，@media screen and (min-width=375px) {.content { styles }};
移动设备显示尺寸大全之CSS3媒体查询：

    @media screen and ( min-width: 212px){/*213px显示屏样式 LG Optimus One*/}
    @media screen and ( min-width: 319px){/*320px显示屏样式 苹果4/4S/5C/5S黑莓Z30 */}
    @media screen and ( min-width: 359px){/*360px显示屏样式 索尼Z1*/}
    @media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){ /*兼容iphone6*/ }
    @media screen and ( min-width: 383px){/*384px显示屏样式 黑莓Z10 谷歌 Nexus 6 LG Optimus G*/}
    @media screen and ( min-width: 399px){/*399px显示屏样式 三星galaxyNote*/}
    @media screen and ( min-width: 414px){/*414px显示屏样式 苹果6plus*/}
    @media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3){ /*兼容iphone6+*/ }
    @media screen and ( min-width: 423px){/*424px显示屏样式 LG 4X */}
    @media screen and ( min-width: 479px){/*480px显示屏样式 索尼MT27i Xperia sola*/}
    @media screen and ( min-width: 539px){/*640px显示屏样式 摩托罗拉Droid3/4/Razr Atrix 4g*/}
    @media screen and ( min-width: 639px){/*640px显示屏样式*/}
    @media screen and ( min-width: 640px){/*640px以上显示屏样式*/}
    @media only screen and (min-device-width :1080px) and (-webkit-min-device-pixel-ratio : 2.5){ /*魅族*/  }
    @media only screen and (min-device-width :1080px) and (-webkit-min-device-pixel-ratio : 3){ /*mate7*/  }
    @media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){ /* 兼容iphone4/4s */; }
    @media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){ /* 兼容iphone5 */; }

声明：小编刚起步写博客，缺乏经验，如果有什么不好的地方欢迎各位批评指正哈！我会慢慢改进的！！！

仲夏夜之恋

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
WebApp开发中关于屏幕适配的那点事儿

小编近来在研究混合App的开发，其中遇到一个问题就是针对不同手机屏幕需要进行适配。查阅了相关资料后做了一些总结，希望对大家能有帮助。首先我们需要了解一些基本的概念，什么是物理像素、设备独立像素、设备像素比等等。在这里我就不给大家解释了，推荐给大家一个连接，写的很nice。移动端高清、多屏适配方案 OK，了解完基本的概念，接下来给大家提供几种适配方法：一、使用rem来做
复制链接

扫一扫