webApp 页面适配布局

时间 2019-11-08

标签 webapp 页面适配布局栏目无线繁體版

原文原文链接

webApp 页面布局

1. 流式布局

概念：
流式布局是页面元素宽度按照屏幕分辨率进行适配调整，可是总体布局不变。css

设计方法：
布局都是经过百分比来定义宽度，可是高度大都是用px固定的。html

弊端：webpack

虽然可让各类屏幕适配，可是显示的效果极其很差。（有些手机页面的宽度会被拉伸，可是高度不变，很不协调。）
大量百分比布局，也会出现许多兼容问题。

2. 静态布局

概念：
静态布局是无论浏览器尺寸是多少，网页上全部元素的尺寸一概使用px做为单位，。这种设计经常使用于pc端css3

设计方法：
结合min-width，若是小于这个宽度就会出现滚动条，若是大于这个宽度，则会出现留白web

弊端：npm

大屏幕手机两侧留白太多，页面会显得比较小，操做按钮也比较小
这种设计只适用于PC端，移动端有严重的不兼容性

3. 媒体查询`@media`

概念：
媒体查询是css3的新属性，为不一样屏幕分辨率定义一个布局样式，即元素的位置和大小都是会改变的。gulp

设计方法：
根据不一样的分辨率来设计所须要的元素的位置和大小浏览器

//适配iphone 5
@media screen and (max-width: 320px) {
    html{font-size: 14px;}
    .name{
        font-size: 14px;
        margin-top: 28px;
    }
}
//适配宽度在321px - 413px 之间
@media screen and (min-width: 321px) and (max-width: 413px) {
    html{font-size: 16px;}
    .name{
        font-size: 16px;
        margin-top: 32px;
    }
}
//适配宽度在414px - 639px 之间
@media screen and (min-width: 414px) and (max-width: 639px) {
    html{font-size: 17px;}
    .name{
        font-size: 17px;
        margin-top: 34px;
    }
}
//适配宽度大于640px
@media screen and (min-width: 640px) {
    html{font-size: 18px;}
    .name{
        font-size: 18px;
        margin-top: 36px;
    }
}

弊端：sass

要匹配足够多的屏幕大小，工做大，维护性难，须要足够大的耐心
媒体查询也是有限的，能够枚举出来的只能适应主流的宽高

4. 设置`viewport`进行缩放

概念：
经过<meta>来提供一些页面的元信息，位于文档的头部<head>标签内来进行缩放app

设计方法：

<meta name="viewport" content="width=device-width,minimun-scale=1.0,maximum-scale=1.0,user-scalable=no" />

经过设置最大缩放比maximum-sacle和最小缩放比minimum-scale来兼容屏幕。

弊端：

全局缩放，可能会形成出错。通常不单独使用，能够结合媒体查询或是rem单位等来使用。

5. `rem`等比例适配屏幕

概念：
rem是css3新增的一个相对长度单位，相对于根元素（即html元素）font-size计算值的倍数。经过设置html的字体大小，来控制rem的大小。

设计方法：
1）@media媒体查询在css中定义好根元素的font-size的大小

经过@media媒体查询来更改html的字体大小，实现兼容不一样的设备。

//适配iphone 5
@media screen and (max-width: 320px) {
    html{font-size: 14px;}  //1rem = 14px
}
//适配宽度在321px - 413px 之间
@media screen and (min-width: 321px) and (max-width: 413px) {
    html{font-size: 16px;}   //1rem = 16px
}
//适配宽度在414px - 639px 之间
@media screen and (min-width: 414px) and (max-width: 639px) {
    html{font-size: 17px;}   //1rem = 17px
}
//适配宽度大于640px
@media screen and (min-width: 640px) {
    html{font-size: 18px;}   //1rem = 18px
}

设计好根元素以后，页面中全部的元素的位置和大小单位都采用rem来写。

2）js动态计算font-size大小

用@media来设置根元素的font-size不能使全部的设备全适配，用js来计算font-size能够实现全适配。在<script>标签中加上以下代码，这个标签最好放在<head>头部里。

(function(){
        document.addEventListener('DOMContentLoaded',function(){
            var html = document.documentElement;
            var deviceWidth = html.clientWidth;
            html.style.fontSize = deviceWidth/750*100 + "px";
        },false);   
    })();

其中750 数字是设计稿的尺寸，这里采用的是iPhone 6 的设计稿尺寸750px，由于计算出来的font-size字体过小，且有些浏览器不兼容过小的字号，因此font-size要放大100倍。

页面元素设置宽高

css中的尺寸 = 设计稿尺寸  /  100

上述的js代码也能够进行简化：

document.documentElement.style.fontSize = document.documentElement.clientWidth / 750 *100 + "px";

效果和原理都是同样的。一样放在一个<script>标签里，标签放在<head>里面。

6. 引用`flexible.js`

概念：
flexible.js是阿里团队开源的一个库，能够轻松兼容各类不一样的移动端设备自适应的问题

设计方法：
1）结合viewport使用
在页面的<head>中引入viewport

<meta name="viewport" content="width=device-width,minimun-scale=1.0,maximum-scale=1.0,user-scalable=no" />

2）引入flexible_css.js,flexible.js
在页面的<head>中引入文件

// 加载阿里CDN的文件
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>

也能够把这两个文件下载到本身的项目中，而后引入，效果是同样的。

3）页面单位采用rem格式
能够经过一些插件快速的将px->rem，好比sublime text 3 的 CSSREM 插件能够完成自动转换。

除了使用编辑器的插件外，还可使用css 预处理器，好比scss，里面的函数、混合宏这些功能来实现。

还有一款npm工具是px2rem，或是使用PostCSS。这二者适合在大项目中，由于能够配合gulp 或是 webpack，不适合单页面。

4）页面效果
配置好flexible.js后，能够在页面上看到它给<html>元素添加了data-dpr属性和font-size属性，而且二者会根据不一样的手机分辨率来动态的改变它们的值。

弊端：

不适配平板
不兼容其余的UI框架组件，好比：vux, weui, mini ui等。由于市面上的一些UI 组件都是自身已经作过适配的，再结合flexible的话，会致使总体组件被缩小，反而处理起来更加麻烦

7. `vw, vh, vmax, vmin`属性

概念：
vw，vh是css3新增的单位属性，他们的计算方式是相对于视口的宽度和高度。视口被均分为100单位
vmax相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位
vmin相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的

设计方式：
元素的位置和大小采用vw , vh , vmax , vmin为单位

弊端：
兼容性问题，有些手机不兼容这个单位

综上所述：
单一的H5页面能够经过动态计算js来改变font-size大小。
大型的项目好比webpack项目能够采用rem + flexible + sass

webApp 页面适配布局

webApp 页面布局

1. 流式布局

2. 静态布局

3. 媒体查询@media

4. 设置viewport进行缩放

5. rem等比例适配屏幕

6. 引用flexible.js

7. vw, vh, vmax, vmin属性

3. 媒体查询`@media`

4. 设置`viewport`进行缩放

5. `rem`等比例适配屏幕

6. 引用`flexible.js`

7. `vw, vh, vmax, vmin`属性