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 ...
- webApp 页面适配布局
webApp 页面布局 1. 流式布局 概念: 流式布局是页面元素宽度按照屏幕分辨率进行适配调整,但是整体布局不变. 设计方法: 布局都是通过百分比来定义宽度,但是高度大都是用px固定的. 弊端: 虽 ...
- 一步一步构建手机WebApp开发——页面布局篇
继上一篇:一步一步构建手机WebApp开发——环境搭建篇过后,我相信很多朋友都想看看实战案例,这一次的教程是页面布局篇,先上图: 如上图所示,此篇教程便是教初学者如何快速布局这样的页面.废话少说,直接 ...
- html5 移动端单页面布局
序 移动端的web网页使用的是响应式设计,但一般我们看到的网站页面都是跳转刷新得到的,比如通过点击一个menu后进入到另一个页面 今天来说下是移动端的单页面的布局.单页面就是一切操作和布局都是 ...
- 使用 Apache Tiles 3 构建页面布局
参考博客:http://aiilive.blog.51cto.com/1925756/1596059Apache Tiles是一个JavaEE应用的页面布局框架.Tiles框架提供了一种模板机制,可以 ...
- Appcan开发之页面布局与CSS排版(转)
在Appcan开发中,首先要进行的就是页面布局,然后在这个页面上填充数据,加上互动元素,最终构成完整的应用. 因为appcan是使用HTML5+CSS3+JavaScript技术来进行开发,所以与普通 ...
- 前端框架 EasyUI (2)页面布局 Layout
在 Web 程序中,页面布局对应用程序的用户体验至关重要. 在一般的信息管理类的 Web 应用程序中,页面结构通常有一个主工作区,然后在工作区上下左右靠近边界的区域设置一些边栏,用于显示信息或放置一些 ...
- Xamarin+Prism开发详解五:页面布局基础知识
说实在的研究Xamarin到现在,自己就没设计出一款好的UI,基本都在研究后台逻辑之类的!作为Xamarin爱好者,一些简单的页面布局知识还是必备的. 布局常见标签: StackLayout Abso ...
- CSS3与页面布局学习总结(八)——浏览器兼容与前端性能优化
一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...
随机推荐
- Centos 下更改MySQL源数据存放目录(datadir)
MySQL在安装完成之后,其源数据默认存放在 /var/lib/mysql/ 目录下,一般情况下,该目录在根目录下,由于Linux系统默认 根目录所在挂载的磁盘容量有限,随着生产数据的不断产生,该目 ...
- js数组,运算符
- 005/搭建fabric环境(一)
一.安装虚拟机VMware 参考博客:https://blog.csdn.net/u013142781/article/details/50529030 Step1:下载ubuntu镜像 (约1.8G ...
- [Python3 填坑] 003 关键字?保留字?预留字?
目录 1. print( 坑的信息 ) 2. 开始填坑 2.1 问题的由来 2.2 网上搜索 2.3 结论 2.4 后记 1. print( 坑的信息 ) 挖坑时间:2019/01/04 明细 坑的编 ...
- HDFS数据流——读数据流程
HDFS读数据流程 假设客户端请求下载文件/user/atguigu/ss.avi,HDFS读数据流程如下: 1)客户端向namenode请求下载文件,namenode通过查询元数据,找到文件所有文件 ...
- Excel VBA批量处理寸照名字
需求:因为处理学生学籍照片,从照相馆拿回来的寸照是按班级整理好,文件名是相机编号的文件.那么处理的话,是这么一个思路,通过Excel表格打印出各班A4照片列表,让学生自行填上照片对应姓名.表格收回来后 ...
- 高性能和可扩展的React-Redux
注意:文章很长,只想了解逻辑而不深入的,可以直接跳到总结部分. 初识 首先,从它暴露对外的API开始 ReactReduxContext /* 提供了 React.createContext(null ...
- 收集慕课网讲解的border知识
1.使用boeder辅助background-posi定位 2.使用border实现三道杠图标 3.利用border实现--鼠标放上去后,改变图标的颜色
- JavaScript 模块化简析
关于模块化,最直接的表现就是我们写的 require 和 import 关键字,如果查阅相关资料,就一定会遇到 CommonJS .CMD AMD 这些名词,以及 RequireJS.SeaJS 等陌 ...
- JVM虚拟机基础知识
1. Java的发展 Java之父:詹姆斯·高斯林 2. Java的技术体系 Java 程序设计语言 JVM class文件格式 编译器 Java API 第三方Java类库 三个版本: Java S ...