BODY background=自适应大小_前端开发分辨率自适应

最新推荐文章于 2024-07-09 18:01:50 发布

weixin_39850150

最新推荐文章于 2024-07-09 18:01:50 发布

阅读量863

点赞数

不管是做Web前端开发的，还是做移动端H5开发的，都会受到全屏分辨率自适应的困扰，下面我们就分享一下CSS解决分辨率自适应的几种方法。

一、meta标签 1、H5移动端页面自适应普遍使用的方法，理论上讲使用这个标签是可以适应所有尺寸的屏幕的，但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。 2、viewport (1)viewport 是用户网页的可视区域。翻译为中文可以叫做"视区" (2)手机浏览器是把页面放在一个虚拟的"窗口"(viewport)中，通常这个虚拟的"窗口"(viewport)比屏幕宽，这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局)，用户可以通过平移和缩放来看网页的不同部分。 3、viewport标签 < meta name ="viewport” content ="width=device-width,initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> 4、viewport标签属性

属性名	取值	描述
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-scalable	yes/no	定义是否允许用户手动缩放页面，默认值yes

二、rem标签1、rem是CSS3新增的一个相对单位(root em，根em),使用rem为元素设定字体大小时，是相对大小，但相对的只是HTML根元素。通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。2、目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。默认html的font-size是16px，即1rem=16px，如果某div宽度为32px你可以设为2rem。 p { font-size : 14px ; font-size : .875rem ; }3、不同屏幕下的规则定义，即基数的定义方式：可以通过CSS定义，不同宽度范围里定义不同的基数值，当然也可以通过js一次定义方法如下

(function(doc,win){

var docE1 = doc.documentElement,

resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

recalc = function(){

var clientWidth = docE1.clientWidth;

if(!clientWidth) return;

//其中20根据你设置的html的font-size属性值做适当的变化

docE1.style.fontSize = 20 * (clientWidth / 320) + 'px';

}；

if(!doc.addEventListener) return;

win.addEventListener(resizeEvt, recalc, false);

doc.addEventListener('DOMContentLoaded', recalc, false);