没有合适的资源?快使用搜索试试~ 我知道了~
浅谈移动端适配大法
需积分: 0 0 下载量 153 浏览量
2020-09-22
10:44:19
上传
评论
收藏 81KB PDF 举报
温馨提示
试读
3页
主要介绍了浅谈移动端适配大法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
资源推荐
资源详情
资源评论
浅谈移动端适配大法浅谈移动端适配大法
主要介绍了浅谈移动端适配大法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起
跟随小编过来看看吧
前言前言
前端代码的编写永远逃不过“兼容”二词,从前PC时代,因为IE的傲娇,导致程序猿们一直在兼容IE的道路上挣扎,如今移动设
备的普及,仿佛让我们看到了希望,仿佛马上就要摆脱IE了,可是!一波还未平息,一波又来侵袭~移动端确实不用考虑IE
了,各种CSS新特性也用的爽到飞起,但一座大山压了过来,那就是分辨率的适配,移动端由于展示区域比较小,因此对于
页面在不同分辨率手机上的展示细节也要求更加严格,这时像PC端有些固定宽高的布局方式显然不适应,我们被要求对于不
同大小手机页面能自适应,真是非常有(tong)趣(ku)呢
话不多说,下面就总结了一些移动端常用的适配手法:
一、百分比一、百分比
使用场景:只要求宽度随屏幕自适应,比如文字块
百分比在PC端自适应上也经常用到,着实相当好用,但它一般用于宽度自适应的设置,高度设置百分比时,要求其父类元素
有明确高度。
1、利用百分比实现填充全屏、利用百分比实现填充全屏
为了让元素设置height:100%生效,并且正好为窗口高度,则需要给html和body元素以及它所有的父元素都设置高度100%。
例如:
<html style="height: 100%;">
<body style="height: 100%;">
<div class="wrap" style="height: 100%; width:100%">
填充全屏啦
</div>
</body>
</html>
在使用height: 100%;时需要注意的一些事项
Margins 和 padding 会让你的页面出现滚动条,也许这是你不希望的。
如果你的元素实际高度大于你设定的百分比高度,那元素的高度会自动扩展。
写到这里我突然想插个题外话,对于absolute定位的元素,用height:100%显然也是无效的,因为此时它已经脱离了文档
流,此时它的高度由自身内容撑开。这是如果我希望它填满父盒子,怎么做?这里有个黑魔法,设置它的top,left,bottom,right
均为0,这时盒子就会被拉伸至填满父盒子。
2、利用百分比实现宽高比固定、利用百分比实现宽高比固定
有时,我们希望宽度自适应,高度随宽度变化而变化,并有固定的宽高比。
让我们缕缕,用height百分比显然不行,height百分比是以父元素高度为基准的,而我们需要以宽度为基准来设置高度。
所以这里可以用到padding-top或者padding-bottom,padding是以父元素的width为基准的。我们可以设置元素的height:0,
然后用padding-bottom将元素撑开,以实现固定宽高比。
二、二、rem
使用场景:对于图片等对高度自适应有要求的场景
rem单位:以页面根字体的大小,也就是html元素字体的大小为基准,例如
html{
font-size:16px;
}
那么1rem等于16px。
所以使用时,我们只要让根字体大小随屏幕大小自适应,那页面中所有使用rem单位来设置宽高的元素,大小也会随屏幕大小
自适应了。
根据不同屏幕大小设置根字体大小有两种方法:
1、、css方法设置方法设置rem
资源评论
weixin_38520437
- 粉丝: 5
- 资源: 920
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功