Skip to content

Instantly share code, notes, and snippets.

@303182519

303182519/rem.md

Created June 6, 2014 09:05
Show Gist options
  • Save 303182519/2af4617fbd2a5d7cf9c4 to your computer and use it in GitHub Desktop.
Save 303182519/2af4617fbd2a5d7cf9c4 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
rem.md

福利中心APP响应式总结

在做福利中心APP的时候，遇到了一些响应式的问题，这里归纳一下

主要介绍文字的响应式、图片的响应式，配合媒体查询功能

#文字的响应式

一.首先介绍一下px

px就是css中最基本的长度单位了，用px做单位基本上没什么问题，可以做到让页面按套路精确的展现！

可但是！但可是！如果全篇用px布局会暗藏一个蛋疼的问题，就是当用户和Ctrl滚页面的时候（说白了就是ctrl+，ctrl-），你会发现页面结构产生了不可预知的错乱，因此有砖家倡导使用em替代px。。。。。

二.接下来介绍一下em

如果你从上到下阅读此文，你应该已经知道了em出现的原因，下面说说em的特性，简单的讲px是绝对单位，1px就是1px，2px就是2px，以此类推，而em是相对单位，em相对的基准点就是浏览器的字体大小，浏览器默认字体大小是16px，也就是1em默认等于16px，如果你想给某个文字设定为14px，就这样写 font-size:0.875em; 公式是14/16=0.875em，如果想要15px，那么就是15/16=0.938em, 例如margin:0.938em; 依次类推，样式表都用em来写的话，就可以解决ctrl+，ctrl-时造成的页面错乱问题

这时候有人和我一样就会抱怨了，我的数学是体育老师教的，除以16我怎么可能算明白，那好办你可以在根节点上重定义基准字号 html {font-size:62.5%} ，此时页面基准字号就是 16px * 62.5% = 10px , 那么此时 1em = 10px，那么此时14px = 1.4em，15px=1.5em，依次类推，就算你数学是要饭的教的应该也会算了吧-。-！

可但是！但可是！问题又来了，em准确的说是相对于父节点的字号来计算的，如果自身定义了字号那么就相对自身字号来计算，举例如下：

html { font-size: 100%; }
.box-0 {
    height: 1em; /* 此时height等于16px */
}
.box-1 { 
    font-size: 0.625em; /* 此时基准字号以变更为16*0.625=10px */ 
    height: 1em; /* 此时实际height等于10px */
}

##三.最后介绍一下主角rem em和em一样也是一个相对单位，为了方便理解，我们就理解rem为root em，顾名思义rem只相对跟节点计算，这就是说只要在根节点设定好参考值，那么全篇的1rem都相等，计算方式同em，默认1rem=16px; 同理你可以设定html { font-size:62.5% } 那么1rem就等于10px，以此类推。。。

声明一下：rem是css3属性，没错！这就是说屌丝ie678不支持rem属性，只有chrome、firefox等高富帅支持！那么我们就在ie678中用px做兼容处理，例如：

.box {
    font-size: 14px; /* 用来兼容ie678 */
    font-size: 0.875em; 
}

##四.结合媒体查询功能

@media screen and (max-width:480px){
	html {
		font-size: 55%;
	}
}

#图片的响应式

######带宽是手机终端的硬伤，如果我们只是页面布局做了响应式处理，在我们用手机访问时，请求的图片还是PC上的大图；文件体积大，消耗流量多，请求延时长，因此导致的问题也是不可估量的。那么我们就得把图片也处理成响应式的根据终端类型尺寸分辨率来适配出合理的图形。

##处理原理

浏览器获取用户终端的屏幕尺寸、分辨率逻辑处理后输出适应的图片，如屏幕分辨率320*480，那么我们匹配给它的是宽度应小于320px的图片。如果终端屏幕的DPI(device pixels)DPI详解值很高，也就是高清屏，那么我们就得输出2倍分辨率的图形(宽:640px)；以保证在高清屏下图形的清晰度。各种移动终端的屏幕参数可通过http://screensiz.es/phone查询。

##解决方案

其实W3C已经有一个用于响应式图形的草案：新定义标签，因为它还只是草案，目前还没有支持的浏览器，期待在不久的未来我们能用上。虽然目前不支持，但我们还是来了解下，为之后的内容做个铺垫。

是一个图形element，内容由多个源图组成，并由CSS Media Queries来适配出合理图形，代码规范如下：

<picture width="500" height="500">
   <source media="(min-width: 640px)" srcset="large-1.jpg 1x, large-2.jpg 2x">
   <source media="(min-width: 320px)" srcset="med-1.jpg 1x, med-2.jpg 2x">
   <source srcset="small-1.jpg 1x, small-2.jpg 2x">
   <img src="small-1.jpg" alt="">
   <p>Accessible text</p>
   <!-- Fallback content-->
   <noscript>
      <img src="external/imgs/small.jpg" alt="Team photo">
   </noscript>
</picture>
  • source: 一个图片源；
  • media: 媒体查询，用于适配屏幕尺寸；
  • srcset: 图片链接，1x适应普通屏，2x适应高清屏；
  • noscript: 当浏览器不支持脚本时的一个替代方案；
  • img: 初始图片；另外还有一个无障碍文本，类似的alt属性。

目前还不支持，但它的原理我们是可借鉴的，所以就诞生了一个用于图片响应式处理的类库Picturefill

<span data-picture data-alt="图片描述文本">
    <span data-src="small.jpg"></span>
    <span data-src="medium.jpg"     data-media="(min-width: 400px)"></span>
    <span data-src="large.jpg"      data-media="(min-width: 800px)"></span>
    <span data-src="extralarge.jpg" data-media="(min-width: 1000px)"></span>
    <!-- 浏览器不支持JS时的备用方案. -->
    <noscript>
        <img src="external/imgs/small.jpg" alt="图片描述文本">
    </noscript>
</span>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment