HTML5 移动页面自适应手机屏幕四类方法总结


Posted in HTML / CSS onAugust 17, 2017

1、使用meta标签:viewport

H5移动端页面自适应普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。

 viewport 是用户网页的可视区域。翻译为中文可以叫做"视区"。

手机浏览器是把页面放在一个虚拟的"窗口"(viewport)中,通常这个虚拟的"窗口"(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的不同部分。 

viewport标签极其属性:

复制代码
代码如下:
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

每个属性的详细介绍:

HTML5 移动页面自适应手机屏幕四类方法总结

2、使用css3单位rem

rem是CSS3新增的一个相对单位(root em,根em),使用rem为元素设定字体大小时,是相对大小,但相对的只是HTML根元素。通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。

目前,除了IE8及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是一个例子:

p {font-size:14px; font-size:.875rem;}

 默认html的font-size是16px,即1rem=16px,如果某div宽度为32px你可以设为2rem。

通常情况下,为了便于计算数值则使用62.5%,即默认的10px作为基数。当然这个基数可以为任何数值,视具体情况而定。设置方法如下:

Html{font-size:62.5%(10/16*100%)}

 具体不同屏幕下的规则定义,即基数的定义方式:可以通过CSS定义,不同宽度范围里定义不同的基数值,当然也可以通过js一次定义方法如下:

<script type="text/javascript">
   (function (doc, win) {
      var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
          var clientWidth = docEl.clientWidth;
          if (!clientWidth) return;
          docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';//其中“20”根据你设置的html的font-size属性值做适当的变化
        };

      if (!doc.addEventListener) return;
      win.addEventListener(resizeEvt, recalc, false);
      doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
</script>

3、使用媒体查询

媒体查询也是css3的方法,我们要解决的问题是适应手机屏幕,这个媒体查询正是为解决这个问题而生。

媒体查询的功能就是为不同的媒体设置不同的css样式,这里的“媒体”包括页面尺寸,设备屏幕尺寸等。

例如:如果浏览器窗口小于 500px, 背景将变为浅蓝色:

 

@media only screen and (max-width: 500px) {
    body {
        background-color: lightblue;
    }
}

4、使用百分比

百分比指的是父元素,所有百分比都是这样的。子元素宽度50%,那么父元素的宽度就是100%;

所以body默认宽度是屏幕宽度(PC中指的是浏览器宽度)子孙元素按百分比定位(或指定尺寸)就可以了,这只适合布局简单的页面,复杂的页面实现很困难。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
使用CSS3的appearance属性改变元素的外观的方法
Dec 12 HTML / CSS
浅谈css3中的前缀
Jul 20 HTML / CSS
谈谈对css属性box-sizing的了解
Jan 04 HTML / CSS
浅谈CSS3中的变形功能-transform功能
Dec 27 HTML / CSS
分享一个页面平滑滚动小技巧(推荐)
Oct 23 HTML / CSS
HTML5 声明兼容IE的写法
May 16 HTML / CSS
使用html5+css3来实现slider切换效果告别javascript+css
Jan 08 HTML / CSS
HTML中使用SVG与SVG预定义形状元素介绍
Jun 28 HTML / CSS
HTML5 canvas画图并保存成图片的jcanvas插件
Jan 17 HTML / CSS
html5将图片转换成base64的实例代码
Sep 21 HTML / CSS
Html5踩坑记之mandMobile使用小记
Apr 02 HTML / CSS
使用layui实现左侧菜单栏及动态操作tab项的方法
Nov 10 HTML / CSS
HTML5新增属性data-*和js/jquery之间的交互及注意事项
Aug 08 #HTML / CSS
html5 canvas合成海报所遇问题及解决方案总结
Aug 03 #HTML / CSS
从零实现一个自定义html5播放器的示例代码
Aug 01 #HTML / CSS
浅谈HTML5 服务器推送事件(Server-sent Events)
Aug 01 #HTML / CSS
基于HTML5陀螺仪实现ofo首页眼睛移动效果的示例
Jul 31 #HTML / CSS
html5教你做炫酷的碎片式图片切换 (canvas)
Jul 28 #HTML / CSS
H5 canvas实现贪吃蛇小游戏
Jul 28 #HTML / CSS
You might like
PHP简洁函数(PHP简单明了函数语法)
2012/06/10 PHP
php递归删除目录下的文件但保留的实例分享
2014/05/10 PHP
PHP在网页中动态生成PDF文件详细教程
2014/07/05 PHP
php 实现一个字符串加密解密的函数实例代码
2016/11/01 PHP
phpinfo()中Loaded Configuration File(none)的解决方法
2017/01/16 PHP
可输入的下拉框
2006/06/19 Javascript
不能再简单的无闪刷新验证码原理很简单
2007/11/05 Javascript
suggestion开发小结以及对键盘事件的总结(针对中文输入法状态)
2011/12/20 Javascript
用js格式化金额可设置保留的小数位数
2014/05/09 Javascript
用js一次改变多个input的readonly属性值的方法
2014/06/11 Javascript
js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
2015/08/11 Javascript
js实现瀑布流效果(自动生成新的内容)
2017/03/16 Javascript
js 两个日期比较相差多少天的实例
2017/10/19 Javascript
nodeJS微信分享
2017/12/20 NodeJs
微信小程序实现批量倒计时功能
2020/11/01 Javascript
Vue.js中Line第三方登录api的实现代码
2020/06/29 Javascript
js编写简易的计算器
2020/07/29 Javascript
vue项目开启Gzip压缩和性能优化操作
2020/10/26 Javascript
Python中的高级函数map/reduce使用实例
2015/04/13 Python
Python函数式编程指南(三):迭代器详解
2015/06/24 Python
python检查字符串是否是正确ISBN的方法
2015/07/11 Python
详解Python的Django框架中inclusion_tag的使用
2015/07/21 Python
pytorch训练imagenet分类的方法
2018/07/27 Python
pyqt5 实现多窗口跳转的方法
2019/06/19 Python
Python实现队列的方法示例小结【数组,链表】
2020/02/22 Python
Python tkinter实现简单加法计算器代码实例
2020/05/13 Python
pandas DataFrame运算的实现
2020/06/14 Python
Onzie官网:美国时尚瑜伽品牌
2019/08/21 全球购物
Ooni英国官网:披萨烤箱
2020/05/31 全球购物
银行求职信个人范文
2013/12/16 职场文书
秋季运动会广播稿(30篇)
2014/09/13 职场文书
优化经济发展环境工作总结
2015/08/11 职场文书
史上最全的军训拉歌口号
2015/12/25 职场文书
MySQL 角色(role)功能介绍
2021/04/24 MySQL
Nginx HTTP跳转至HTTPS
2022/05/15 Servers
SpringBoot项目多数据源及mybatis 驼峰失效的问题解决方法
2022/07/07 Java/Android