HTML5 移动页面自适应手机屏幕的几种方法

335 2020/06/06 艾维畅想网

本篇文章介绍HTML5移动页面自适应手机屏幕的几种方法,希望对你有所帮助。


第一种:使用meta标签: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"/>


属性介绍:

width正整数 或 device-width定义视口的宽度,单位为像素height正整数 或 device-height定义视口的高度,单位为像素,一般不用initial-scale[0.0-10.0]定义初始缩放值minimum-scale[0.0-10.0]定义缩小最小比例,它必须小于或等于maximum-scale设置maximum-scale[0.0-10.0]定义放大最大比例,它必须大于或等于minimum-scale设置user-scalableyes/no定义是否允许用户手动缩放页面,默认值yes

第二种:使用css3单位rem

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


注意:浏览器不支持IE8及更早版本。

示例:

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%)}

不同宽度范围里定义不同的基数值,我们也可以用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 = 24 * (clientWidth / 320) + 'px';//其中“24”根据你设置的html的font-size属性值做适当的变化        };      if (!doc.addEventListener) return;      win.addEventListener(resizeEvt, recalc, false);      doc.addEventListener('DOMContentLoaded', recalc, false);    })(document, window);</script>

第三种:使用媒体查询


媒体查询也是css3的方法,主要就是解决适应手机屏幕的问题。

示例代码:

@media only screen and (max-width: 768px) {

    .div-media {

        font-size:24px;

        background-color: lightred;

    }

}

说明:当屏幕宽度尺寸小于768像素的时候,div执行.div-media样式。


第四种:使用百分比

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

所以body默认宽度是屏幕宽度(PC中指的是浏览器宽度)子孙元素按百分比定位(或指定尺寸)就可以了,这种方法只时候简单页面布局。

分享到
  • 微信好友
  • QQ好友
  • QQ空间
  • 腾讯微博
  • 新浪微博
  • 人人网
成都艾维畅想网络科技有限公司
地址:成都市双流区华阳镇西寺路石化大厦酒店附近100米
联系人:满经理(成都/北京) 沈经理(广州)
电话:199-3875-5567
QQ:845583755(成都/北京) 578551723(广州)
邮箱:845583755@qq.com
  • 微信公众号
  • 手机版
  • 微信小程序

——需求定制——

您的姓名
联系电话
需求
热门标签: 品牌网站建设 | 购物商城建设 | 微信公众号 | 微信小程序 | APP开发 | 响应式开发 北京网站建设 | 成都网站建设 | 广州网站建设 | 网站推广优化 | 网站维护 | 服务器环境搭建 LOGO设计 | 宣传册设计 | 产品包装设计 | 名片设计 | 海报设计 | 广告设计
Copyright © 2011-2020 艾维畅想网 All Right Reserved.
ICP备案: 蜀ICP备20018253号-1
川公网安备 51010402000995号 川公网安备 51010402000995号

在线
客服

客服
热线

199-3875-5567
7*24小时客服服务热线

新浪
微博

微信
咨询

微信咨询

关注
微信

关注官方微信公众号
顶部