摘要：流式布局概念流式布局是页面元素宽度按照屏幕分辨率进行适配调整，但是整体布局不变。有些手机页面的宽度会被拉伸，但是高度不变，很不协调。弊端全局缩放，可能会造成出错。这两者适合在大项目中，因为可以配合或是，不适合单页面。
1. 流式布局
概念：
流式布局是页面元素宽度按照屏幕分辨率进行适配调整，但是整体布局不变。
设计方法：
布局都是通过百分比来定义宽度，但是高度大都是用px固定的。
弊端：
虽然可以让各种屏幕适配，但是显示的效果极其不好。（有些手机页面的宽度会被拉伸，但是高度不变，很不协调。）
大量百分比布局，也会出现许多兼容问题。
2. 静态布局概念：
静态布局是不管浏览器尺寸是多少，网页上所有元素的尺寸一律使用px作为单位，。这种设计常用于pc端
设计方法：
结合min-width，如果小于这个宽度就会出现滚动条，如果大于这个宽度，则会出现留白
弊端：
大屏幕手机两侧留白太多，页面会显得比较小，操作按钮也比较小
这种设计只适用于PC端，移动端有严重的不兼容性
3. 媒体查询@media概念：
媒体查询是css3的新属性，为不同屏幕分辨率定义一个布局样式，即元素的位置和大小都是会改变的。
设计方法：
根据不同的分辨率来设计所需要的元素的位置和大小
//适配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;
}
}
弊端：
要匹配足够多的屏幕大小，工作大，维护性难，需要足够大的耐心
媒体查询也是有限的，可以枚举出来的只能适应主流的宽高
4. 设置viewport进行缩放概念：
通过来提供一些页面的元信息，位于文档的头部标签内来进行缩放
设计方法：
通过设置最大缩放比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可以实现全适配。在
也可以把这两个文件下载到自己的项目中，然后引入，效果是一样的。
3）页面单位采用rem格式
可以通过一些插件快速的将px->rem，比如sublime text 3 的 CSSREM 插件可以完成自动转换。
除了使用编辑器的插件外，还可以使用css 预处理器，比如scss，里面的函数、混合宏这些功能来实现。
还有一款npm工具是px2rem，或是使用PostCSS。这两者适合在大项目中，因为可以配合gulp 或是 webpack，不适合单页面。
4）页面效果
配置好flexible.js后，可以在页面上看到它给元素添加了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
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/52257.html
摘要：流式布局概念流式布局是页面元素宽度按照屏幕分辨率进行适配调整，但是整体布局不变。有些手机页面的宽度会被拉伸，但是高度不变，很不协调。弊端全局缩放，可能会造成出错。这两者适合在大项目中，因为可以配合或是，不适合单页面。 1. 流式布局 概念：流式布局是页面元素宽度按照屏幕分辨率进行适配调整，但是整体布局不变。 设计方法：布局都是通过百分比来定义宽度，但是高度大都是用px固定的。 弊端：...
摘要：后续我们还会增加一些实战类的移动开发案例，欢迎关注专栏。进入官网新版预览在线预览需要使用开启设备模拟，效果更佳。 前言 之前写过一篇 2018开发最快的Webapp框架--BUI交互框架 ，如果你还没看过，可以简单看一下，主要介绍了BUI的基本功能，有多少控件，以及实现的思路，BUI 1.5版本以后变化很大，统一新的风格，新的规范750，新增基于Dom的数据驱动，完善了页面的生命周期等...
摘要：先来看下机型的样子上图中，机型在头部和底部新增了这两个区域，所以我们需要针对这类机型做些适配，方便我们的的展示做成的移动端页面，常见布局为头部躯干底部三栏模式，头部和顶部都是固定定位，躯干可里的内容可以滚动，暂定的布局如下但如果没采用机型的 先来看下iPhone X机型的样子 showImg(https://segmentfault.com/img/bVbugGA?w=297&h=60...
摘要：先来看下机型的样子上图中，机型在头部和底部新增了这两个区域，所以我们需要针对这类机型做些适配，方便我们的的展示做成的移动端页面，常见布局为头部躯干底部三栏模式，头部和顶部都是固定定位，躯干可里的内容可以滚动，暂定的布局如下但如果没采用机型的 先来看下iPhone X机型的样子 showImg(https://segmentfault.com/img/bVbugGA?w=297&h=60...
摘要：例如改成例如改成以上两种开发方式都可以结合原生平台打包成独立应用。 继上一篇一张脑图看懂BUI Webapp移动快速开发框架【上】--框架与工具、资源 大纲 在线查看大纲 思路更佳清晰 1. 框架设计 框架介绍 简介 BUI 是用来快速构建界面交互的UI交互框架, 专注webapp开发, 开发者只需关注业务的开发, 界面的布局及交互交给BUI, 开发出来的应用, 可以嵌入平台 ( Li...
阅读 2704·2023-04-25 14:59
阅读 895·2021-11-22 11:59
阅读 638·2021-11-17 09:33
阅读 2470·2021-09-27 13:34
阅读 3901·2021-09-09 11:55
阅读 2323·2019-08-30 15:44
阅读 1126·2019-08-30 14:06
阅读 1926·2019-08-29 16:55
