注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

叶落非殇

charset="UTF-8"

 
 
 

日志

 
 

移动端响应式布局:CSS解决任何分辨率元素比例不变形  

2015-10-08 17:30:11|  分类: CSS |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
在移动端开发的过程中,由于设备分辨率千奇百怪,因此在开发中有很多种做法,经常用的是宽度百分比,高度rem的做法,但rem的做法在平板这类的设备下,如果图形较大,就会出现元素变形,比例异常。
我们可以利用padding百分比的一个性质,padding百分比是相对父级宽度而言的,那么我们就可以利用padding来控制高度,这样宽高的比例就能确定下来,无论怎么缩放都不会改变比例,然后内部元素使用position定位布局,宽高都100%即可。
demo示例:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../css/reset.css">
<title>叶落非殇</title>
<style>
.wrap {
width: 50%;
}
.inner {
position: relative;
left: 0;
top: 0;
width: 100%;
padding-top: 50%;
background-color: yellow;
}
.inner-con {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="wrap">
<div class="inner">
<div class="inner-con">也可以把这个标签换成img</div>
</div>
</div>
</body>
</html>

优点:当页面中有一些比较大的元素时,可以确保元素宽高比例一致,如果有一堆图片列表页的话,也可以使图片显示比例一致。(这里有些人说这样做是多此一举,完全没必要,可以不设置高度,完全由内容撑高,那么问题来了:如果是视觉要求是一堆相等大小的图片,而给的这些图片大小和宽高比例都不一致,那么用内容撑高,元素比例能保持一致吗?别说布局不会乱?)
缺点:一、嵌套结构变多;
   二、定位元素变多;
   三、由于高度变得“不可预测”,文字垂直居中书写就需要依赖JS了。
vw和vh:
另外移动端以后完全可以使用vw和vh单位进行开发,但目前安卓低版本兼容还存在一些问题,当这些设备被淘汰时,vw和vh将会是一个非常好用的单位。
兼容情况:
移动端响应式布局:CSS解决任何分辨率元素比例不变形 - 叶落非殇 - 叶落非殇
 
  评论这张
 
阅读(21)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017