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 :nth-child()伪类选择器实现奇偶行显示不同样式
Nov 05 HTML / CSS
CSS3 实现侧边栏展开收起动画
Dec 22 HTML / CSS
非常震撼的纯CSS3人物行走动画
Feb 24 HTML / CSS
CSS3 Flex 弹性布局实例代码详解
Nov 01 HTML / CSS
CSS3+HTML5+JS 实现一个块的收缩与展开动画效果
Nov 17 HTML / CSS
Html5元素及基本语法详解
Aug 02 HTML / CSS
html5 canvas合成海报所遇问题及解决方案总结
Aug 03 HTML / CSS
关于h5中的fetch方法解读(小结)
Nov 15 HTML / CSS
iframe跨域的几种常用方法
Nov 11 HTML / CSS
html5 制作地图当前定位箭头的方法示例
Jan 10 HTML / CSS
从QQtabBar看css命名规范BEM的详细介绍
Aug 07 HTML / CSS
使用canvas仿Echarts实现金字塔图的实例代码
Nov 11 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
层叠菜单的动态生成
2006/10/09 PHP
一个好用的PHP验证码类实例分享
2013/12/27 PHP
php下载文件,添加响应头的简单实例
2016/09/22 PHP
mac os快速切换多个PHP版本的方法
2017/03/07 PHP
yii2.0整合阿里云oss删除单个文件的方法
2017/09/19 PHP
Yii 框架入口脚本示例分析
2020/05/19 PHP
一段利用WSH修改和查看IP配置的代码
2008/05/11 Javascript
JavaScript作用域链使用介绍
2013/08/29 Javascript
jQuery打印图片pdf、txt示例代码
2014/07/22 Javascript
Javascript前端UI框架Kit使用指南之kitjs的对话框组件
2014/11/28 Javascript
使用AngularJS对路由进行安全性处理的方法
2015/06/18 Javascript
css如何让浮动元素水平居中
2015/08/07 Javascript
原生JavaScript实现Tooltip浮动提示框特效
2017/03/07 Javascript
浅谈JavaScript正则表达式-非捕获性分组
2017/03/08 Javascript
nodejs+websocket实时聊天系统改进版
2017/05/18 NodeJs
bootstrap daterangepicker双日历时间段选择控件详解
2017/06/15 Javascript
JS中Safari浏览器中的Date
2017/07/17 Javascript
node结合swig渲染摸板的方法
2018/04/11 Javascript
前端axios下载excel文件(二进制)的处理方法
2018/07/31 Javascript
JS实现的杨辉三角【帕斯卡三角形】算法示例
2019/02/26 Javascript
如何在 ant 的table中实现图片的渲染操作
2020/10/28 Javascript
[47:02]2018DOTA2亚洲邀请赛3月29日 小组赛B组 VP VS paiN
2018/03/30 DOTA
Python实现国外赌场热门游戏Craps(双骰子)
2015/03/31 Python
Python调用C++程序的方法详解
2017/01/24 Python
Python编写登陆接口的方法
2017/07/10 Python
Python实现在tkinter中使用matplotlib绘制图形的方法示例
2018/01/18 Python
python实现输入数字的连续加减方法
2018/06/22 Python
python实现定时发送qq消息
2019/01/18 Python
python字典一键多值实例代码分享
2019/06/14 Python
HTML5 拖放功能实现代码
2016/07/14 HTML / CSS
英国奢华护肤、美容和Spa品牌:Temple Spa
2019/11/02 全球购物
岗位说明书怎么写
2014/07/30 职场文书
简单租房协议书(范本)
2014/10/13 职场文书
工作作风懒散检讨书
2014/10/29 职场文书
导游词400字
2015/02/13 职场文书
《司马光》教学反思
2016/02/22 职场文书