浅谈web自适应

《浅谈web自适应》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、优就此浅谈Web自适应W1刖吕动设备更新速度频繁，手机厂商繁多，导致的问题是每一台机器的屏幕宽度和分辨率不一样。这给我们在编写前端界面时增加了困难，适配问题在当下显得越来越突出。记得刚刚开始开发移动端产品的时候向设计MM要了不同屏幕的设计图，结果可想、而知。本篇博文分享一些卤煮处理多屏幕自适应的经验，希望有益于诸君。特别说明：在开始这一切之前，请开发移动界面的工程师们在头部加上下面这条meta:1〈metaname二〃viewport"content二〃width=device-width，initial-scale

2、二1.0，maximum-scale=l.0,user-scalable=O，z>简单事情简单做-宽度自适应所谓宽度自适应严格来说是一种PC端的自适应布局方式在移动端的延伸。在处理PC端的前端界面时候需要用到全屏布局时采用的就是此种布局方式。它的实现方式也比较简单，彳初卜层容器元素按照百分比铺满地方式，里面的子元素固定或者左右;'孚动。1.div{2width:100%:height:lOOpx;3}4.child{5float:left;6}7.child{8f1oat:right;9}由于父级元素采用百分比的布局

3、方式，随着屏幕的拉伸，它的宽度会无限的拉伸。而子元素由于采用了浮动，那么它们的位置也会固定在两端。该宽度自适应在新的时代有了新的方法，随着弹性布局的普及，它经常被flex或者box这样的伸缩性布局方式替代，变得越来越"弹性"十足。需要了解弹性布局，请前往Flex布局教程和自煮box布局教程比较。大小之辨-完全自适应"完全自适应式"是卤煮对越此方案的叫法，由于卤煮现在找不到官方名称，所以暂时就这样叫它。这种解决方案相对前一种来说进步不少，不仅仅宽度实现了自适应，而且界面所有的元素大小和高度都会根据不同分辨率和屏幕宽度的

4、设备来调整元素、字体、图片、高度等属性的值。简单来说就是在不同的屏幕下，你看到的字体和元素高宽度的大小是不一样的。在这里，有人就会说利用的是媒体查询属性，根据不同的屏幕宽度，调整样式。卤煮之前也是这样想的，但是你需要考虑到界面上的许多元素需要设置字体，如果用mediaquery为每个元素在不同的设备下都设置不同的属性的话，那么有多少种屏幕我们的css就会增加多少倍。实际上在这里，我们采用的是js和css属性rem来解决这个问题的。REM属性指的是相对于根元素设置某个元素的字体大小。它同时也可以用作为设置高度等一系列可

5、以用px来标注的单位。1html{2font-size:lOpx;3}4div{□font-size:lrem;6height:2rem;7width:3rem;8border:.lremsolid#000;9}10采用以上写法，div继承到了html节点的font-size，为本身定义了一系列样式属性，此时lem计算为10px,即根节点的font-size值。所以，这时div的高度就是20px,宽度是30px,边框是lpx,字体大小则是10px;一旦有了这样的方法，我们自然可以根据不同的屏幕宽度设置不同的根节点字体

6、大小。假设我们现在设计的标准是iphone5s,iphone5系列的屏幕分辨率是640。为了统一规范，我们将iphone5分辨率下的根元素font-size设置为100px;12html{3font-size:lOOpx;4}那么以此为基准，可以计算出一个比例值6.4。我们可以得知其他手机分辨率的设备下根兀素字体大小：1/*2数据计算公式640/100=device-width/x可以设置其他设备根元素字体大小3ihone5:640:1004iphone6:750:1175Aiphone6

7、s:1240:1947不/vardeviceWidth=window.documentElement.clientWidth;8document.documentElement.style.fontSize=(deviceWidth/6.4)+’px’；在head中，我们将以上代码加入，动态地改変根节点的font-size值，得到如下结果:接下来我们可以根据根元素的字体大小用rem设置各种属性的相对值。当然，如果是移动设备，屏幕会有一个上下限制，我们可以控制分辨率在某个范围内，超过了该范围，我们就不再増加根元素的字体

8、大小了：12vardeviceWidth=document.documentElement.clientWidth>1300?1300:document.documentElement.clientWidth;document.documentElement.style.fontSize二(deviceWidth/6.4)+’px’；一般的情况