webApp 页面适配布局
webApp 页面布局
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进行缩放
概念：
通过<meta>来提供一些页面的元信息，位于文档的头部<head>标签内来进行缩放
设计方法：
<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 页面适配布局的更多相关文章
- M-移动端的webapp页面布局教程和webapp实战分析
http://www.25xt.com/html5css3/8092.html 响应式设计 1 媒体查询 适用于不同固定宽度设计 媒体类型 : screen 屏幕 print 打印机 handheld ...
- h5页面适配小结
大概是去年的7月想写这个内容去加深自己的理解.现在终于回来补上这篇入门小结了. 1.问题描述 适配的目标:在不同尺寸的手机设备上,页面“相对性的达到合理的展示(自适应)”或者“保持统一效果的等比缩放( ...
- 页面适配的小栗子 - github
我模拟了一个QQ音乐的radiostation页面,用了媒体查询以及流式布局,页面大部分内容是js根据json生成的,使用了less来编写css样式表. 下面是仓库地址,感兴趣的小伙伴可以打开看看,将 ...
- 逐帧动画抖动、适配布局、SVG Sprites
笔者所在的前端团队主要从事移动端的H5页面开发,而团队使用的适配方案是: viewport units + rem.具体可以参见凹凸实验室的文章 – 利用视口单位实现适配布局 . 笔者目前(2017. ...
- PC端、移动端页面适配方案
前言 页面自适应PC端.移动端大体上可以分为两种: 1.在同一个页面进行自适应布局,通常使用CSS3 @media 媒体查询器实现 2.两套页面,在后端进行统一适配,根据不同的浏览器UA返回对应的页面 ...
- 对于页面适配，你应该使用px还是rem
css中的单位很多,%.px.em.rem,以及比较新的vw.vh等.每个单位都有特定的用途,比如当需要设置一个矩形的宽高比为16:9,并且随屏幕宽度自适应时,除了用%,其他单位是很难做到的.所以不存 ...
- 移动web开发之rem适配布局
移动web开发之rem适配布局 方案: 页面布局文字能否随着屏幕大小变化而变化 流式布局和flex布局主要针对于宽度布局,那高度如何布局? 怎样让屏幕发生变化的时候元素高度和宽度等比例缩放? 1. r ...
- 「移动端」Web页面适配
一.什么是移动端适配 移动端 Web 页面,就是常说的手机 h5页面.webview页面.公众号开发的网页等. 由于手机机型较多,各个手机的屏幕尺寸不一样,所以做移动端页面,需要考虑在安卓和ios的各 ...
- 【原】让H5页面适配移动设备全家 - 前端篇 - PPT
7月份在部门内给设计中心的同事们带来<让H5页面适配移动设备全家 - 设计师篇 - PPT>的分享,在视觉和交互稿上提出页面适配的建议及提升页面体验的好处,促进前端和设计双方更好的合作,同 ...
随机推荐
- C# 打包
开发环境:VS2010+SQL Server 2008 操作系统:win7_32bit 旗舰版 开发语言:C# 项目名称:学生寄宿管理系统 下面开始介绍:如何给windows应用程序打包? 第一步: ...
- Hibernate笔记④--一级二级缓存、N+1问题、saveorupdate、实例代码
一级缓存及二级缓存 一级缓存也是Session 缓存 一个链接用户的多次查询使用缓存 跨用户 则无缓存 hibernate自带的 get和load都会填充并利用一级缓存 二级缓 ...
- 2018软工实践—Beta冲刺(3)
队名 火箭少男100 组长博客 林燊大哥 作业博客 Beta 冲鸭鸭鸭! 成员冲刺阶段情况 林燊(组长) 过去两天完成了哪些任务 软件接口编写修正 自动化测试脚本编写 技术文稿更新 展示GitHub当 ...
- 项目Beta冲刺（团队）第六天
1.昨天的困难 可以获得教务处通知栏的15条文章数据了,但是在显示的时候出了问题. 私信聊天的交互还没研究清楚 2.今天解决的进度 成员 进度 陈家权 研究私信模块 赖晓连 研究问答模块 雷晶 研究服 ...
- 『编程题全队』Alpha 阶段冲刺博客Day3
1.每日站立式会议 1.会议照片 2.昨天已完成的工作统计 孙志威: 1.添加团队模块的标题栏 2.测试客户端和服务器之间的通讯基本连通性 3.完成团队模块的燃尽图模块 孙慧君: 1.完成了水印的设计 ...
- GS7 使用IPV6的数据库的注册方法
1. 首先保证 应用服务器和数据库服务器能够互相ping通 可以创建一个 bat 文件里面放上如下内容进行连接. start ping fe80::b0d4:::f3c5 -t start ping ...
- HTML标签参考手册
按字母顺序排列 New : HTML5 中的新标签. 标签 描述 <!--...--> 定义注释. <!DOCTYPE> 定义文档类型. <a> 定义锚. < ...
- Mysql innodb 间隙锁 (转)
MySQL InnoDB支持三种行锁定方式: 行锁(Record Lock):锁直接加在索引记录上面. 间隙锁(Gap Lock):锁加在不存在的空闲空间,可以是两个索引记录之间,也可能是第一个索引记 ...
- js本地储存userData实例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head ...
- 不再混淆，一次搞懂！图解flexbox十余个属性
原文首发于个人博客:不再混淆,一次搞懂!图解flexbox十余个属性 flexbox的发明简直是csser的一大福音,终于可以不再需要为垂直居中一个元素而绞尽脑汁了.同时它还能够实现弹性布局,可以说没 ...