移动页面自适应手机屏幕宽度,手机网页自适应屏幕

　　1、使用meta标签:viewport

　　H5是移动终端上页面适配的一种常用方法。理论上这个标签可以用来适配各种尺寸的屏幕。但是，不同的设备对这个标签的解释和支持是不同的，这使得它与所有的浏览器或系统都不兼容。

　　视口是用户网页的可见区域。翻译成中文可以叫‘视区’。

　　移动浏览器将页面放置在一个虚拟的“视口”中，通常这个虚拟的“视口”比屏幕更宽，这样你就不必将每个网页都挤进一个小窗口中(这会破坏没有针对移动浏览器进行优化的网页的布局)，用户可以通过平移和缩放来查看网页的不同部分。

　　viewport标签极其属性：

　　复制代码如下：meta name= viewport content= width=device-width，initial-scale=1.0，minimum-scale=1.0，maximum-scale=1.0，user-scalable=no/

　　每个属性的详细介绍：

　　2、使用css3单位rem

　　Rem是CSS3中一个新的相对单位(根em)。当Rem用于设置元素的字体大小时，它是一个相对大小，但它只是HTML根元素。它不仅可以通过修改根元素来按比例调整所有字体大小，还可以避免逐层复合字体大小的连锁反应。

　　目前除了IE8及更早版本，所有浏览器都已经支持rem。为不支持绝对单位的浏览器编写一个绝对单位语句。这些浏览器会忽略rem设置的字体大小。这里有一个例子：

　　p { font-size:14px；font-size: 875 rem；}默认html的字体大小为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 ？orientationchange : resize ，recalc=function(){ var client width=docel . client width；如果(！clientWidth)返回；docel . style . font size=20 *(client width/320) px ；//其中“20”根据您设置的html的font-size属性值适当变化}；如果(！doc.addEventListener)返回；win.addEventListener(resizeEvt，recalc，false)；doc . addevent listener( DOMContentLoaded ，recalc，false)；})(文档，窗口)；/script3、使用媒体查询

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

　　媒体查询的功能是为不同的媒体设置不同的css样式，其中“媒体”包括页面大小、设备屏幕大小等。

　　例如：如果浏览器窗口小于500像素，背景将变成浅蓝色：

　　@media only屏幕和(max-width:500 px){ body { background-color:light blue；}}4、使用百分比

　　百分比是指父元素，所有的百分比都是这样的。如果子元素的宽度是50%，那么父元素的宽度是100%；

　　所以body的默认宽度是屏幕宽度(PC指浏览器宽度)，所以子子孙孙按百分比定位(或者指定大小)也是可以的。这仅适用于布局简单的页面，但很难实现复杂的页面。

　　这就是本文的全部内容。希望对大家的学习和支持有帮助。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。