web app 自适应方案总结 关键字 弹性布局之rem
2017-02-14 17:15
651 查看
px:像素是相对于显示器屏幕分辨率而言的相对长度单位。pc端使用px倒也无所谓,可是在移动端,因为手机分辨率种类颇多,不可能一个个去适配,这时px就显得非常无力,所以就要考虑em和rem。
em:继承父级的,假设html的font-size默认为16px,body字体大小定义为50%,那么在body里字体大小就是1em=8px了。可当你又定义了一个div,然后把字体设置成了50%,请问,现在div下的1em等于多少?因为继承了父级的值,现在这个div里的1em=4px,这么嵌套下去的话,抱歉,我数学不好!所有rem就出现了。
rem:是em的升级版,rem只会相对html的值,不会受到父级的影响,这样的好处在于:从em里的例子来讲,1rem始终会等于8px。使用的时候不需要重新计算rem此时的大小。rem因为是css3增加的,所以ie8或以下请无视。
以上也算是讲清了他们之间的区别和关系,rem更多的运用于移动H5页面的适配使用。
浏览器默认的字体大小都是16px(注意这里),所以要使1rem=10px,那么只要在html选择器中声明Font-size=62.5%(10÷16*100%=62.5%)就可以直接使用1rem=10px单位进行换算,其实这个算法是没有错的。可是,哪里来的自信让每个浏览器默认字体都是16px????反正我也不知道自信哪来。。现在Chrome默认大小可以是12px也可以是16px,那么问题来了,国内浏览器,有几个不是用的谷歌内核。所以html选择器中声明Font-size=62.5%,1rem就等于10px的换算就有点坑爹了。rem单位还是可以变的容易换算和精准。所以就去找了些工具和资料。
因为rem是相对html的,那么只要将html选择器设置一个绝对大小的值:比如在html选择器设置font-size:20px;那么1rem=20px(解释下为什么是20而不是其他的,首先10的倍数容易计算,那为什么不是10本身而是20?现在Chrome最小的字体是12px,所以10px是无效的,进一步就取20px);现在是不是和效果图一个像素都不差?!!且要兼容手机各个分别率,使用媒体查询media
可以设置不同的大小,这样在常规的设备中都可以精准到每一个像素。
方法一:下面是我直接在工具复制过来的现成rem换算适配代码↓(设计稿宽度:640,字体值:20)
@media only screen and (max-width: 1080px), only screen and (max-device-width:1080px) {
html,body {
font-size:16.875px;
}
}
@media only screen and (max-width: 960px), only screen and (max-device-width:960px) {
html,body {
font-size:15px;
}
}
@media only screen and (max-width: 800px), only screen and (max-device-width:800px) {
html,body {
font-size:12.5px;
}
}
@media only screen and (max-width: 720px), only screen and (max-device-width:720px) {
html,body {
font-size:11.25px;
}
}
@media only screen and (max-width: 640px), only screen and (max-device-width:640px) {
html,body {
font-size:10px;
}
}
@media only screen and (max-width: 600px), only screen and (max-device-width:600px) {
html,body {
font-size:9.375px;
}
}
@media only screen and (max-width: 540px), only screen and (max-device-width:540px) {
html,body {
font-size:8.4375px;
}
}
@media only screen and (max-width: 480px), only screen and (max-device-width:480px) {
html,body {
font-size:7.5px;
}
}
@media only screen and (max-width: 414px), only screen and (max-device-width:414px) {
html,body {
font-size:6.46875px;
}
}
@media only screen and (max-width: 400px), only screen and (max-device-width:400px) {
html,body {
font-size:6.25px;
}
}
@media only screen and (max-width: 375px), only screen and (max-device-width:375px) {
html,body {
font-size:5.859375px;
}
}
@media only screen and (max-width: 360px), only screen and (max-device-width:360px) {
html,body {
font-size:5.625px;
}
}
@media only screen and (max-width: 320px), only screen and (max-device-width:320px) {
html,body {
font-size:5px;
}
}
@media only screen and (max-width: 240px), only screen and (max-device-width:240px) {
html,body {
font-size:3.75px;
}
方法二 :所有的屏幕适配置
@media screen and (min-width: 300px) {
html {
/* 15 * 62.5% = 9.375 */
font-size: 9.375px;
}
}
@media screen and (min-width: 320px) {
html {
/* 16 * 62.5% = 10 */
font-size: 10px;
}
}
@media screen and (min-width: 340px) {
html {
/* 17 * 62.5% = 10.625 */
font-size: 10.625px;
}
}
@media screen and (min-width: 360px) {
html {
/* 18 * 62.5% = 11.25 */
font-size: 11.25px;
}
}
@media screen and (min-width: 375px) {
html {
/* 18.75 * 62.5% = 11.71875 */
font-size: 11.718px;
}
}
@media screen and (min-width: 380px) {
html {
/* 19 * 62.5% = 11.875 */
font-size: 11.875px;
}
}
@media screen and (min-width: 400px) {
html {
/* 20 * 62.5% = 12.5 */
font-size: 12.5px;
}
}
@media screen and (min-width: 414px) {
html {
/* 20.7 * 62.5% = 12.9375 */
font-size: 12.937px;
}
}
@media screen and (min-width: 420px) {
html {
/* 21 * 62.5% = 13.125 */
font-size: 13.125px;
}
}
@media screen and (min-width: 440px) {
html {
/* 22 * 62.5% = 13.75 */
font-size: 13.75px;
}
}
@media screen and (min-width: 460px) {
html {
/* 23 * 62.5% = 14.375 */
font-size: 14.375px;
}
}
@media screen and (min-width: 480px) {
html {
/* 24 * 62.5% = 15 */
font-size: 15px;
}
}
@media screen and (min-width: 500px) {
html {
/* 25 * 62.5% = 15.625 */
font-size: 15.625px;
}
}
@media screen and (min-width: 520px) {
html {
/* 26 * 62.5% = 16.25 */
font-size: 16.25px;
}
}
@media screen and (min-width: 540px) {
html {
/* 27 * 62.5% = 16.875 */
font-size: 16.875px;
}
}
@media screen and (min-width: 560px) {
html {
/* 28 * 62.5% = 17.5 */
font-size: 17.5px;
}
}
@media screen and (min-width: 580px) {
html {
/* 29 * 62.5% = 18.125 */
font-size: 18.125px;
}
}
@media screen and (min-width: 600px) {
html {
/* 30 * 62.5% = 18.75 */
font-size: 18.75px;
}
}
@media screen and (min-width: 620px) {
html {
/* 31 * 62.5% = 19.375 */
font-size: 19.375px;
}
}
@media screen and (min-width: 640px) {
html {
/* 32 * 62.5% = 20 */
font-size: 20px;
}
}
@media screen and (min-width: 660px) {
html {
/* 33 * 62.5% = 20.625 */
font-size: 20.625px;
}
}
@media screen and (min-width: 680px) {
html {
/* 34 * 62.5% = 21.25 */
font-size: 21.25px;
}
}
@media screen and (min-width: 700px) {
html {
/* 35 * 62.5% = 21.875 */
font-size: 21.875px;
}
}
@media screen and (min-width: 720px) {
html {
/* 36 * 62.5% = 22.5 */
font-size: 22.5px;
}
}
@media screen and (min-width: 740px) {
html {
/* 37 * 62.5% = 23.125 */
font-size: 23.125px;
}
}
@media screen and (min-width: 760px) {
html {
/* 38 * 62.5% = 23.75 */
font-size: 23.75px;
}
}
@media screen and (min-width: 780px) {
html {
/* 39 * 62.5% = 24.375 */
font-size: 24.375px;
}
}
@media screen and (min-width: 800px) {
html {
/* 40 * 62.5% = 25 */
font-size: 25px;
}
}
@media screen and (min-width: 1024px) {
html {
/* 51.2 * 62.5% = 32 */
font-size: 32px;
}
}
@media screen and (min-width: 1349px) {
html {
/* 67.45 * 62.5% = 42.15625 */
font-size: 42.156px;
}
}
方法三:用js计算
/* 注意:里面的一些值需要根据你自己的项目来动态改变 */
(function(){
// 获取html的标签
var oHtml = document.documentElement;
// 在页面上来的时候就调用一下
getSize();
// 当缩放屏幕时实时计算
window.addEventListener('resize', function(){
getSize();
})
function getSize(){
// 获取屏幕的大小
var screenWidth = oHtml.clientWidth;
if(screenWidth < 320){
// 当屏幕小于320的情况下,直接不予缩放
oHtml.style.fontSize = '17.778px';
}else if(screenWidth > 750){
// 当屏幕大于640的情况下,直接不予缩放
oHtml.style.fontSize = '40px';
}else{
// 在这个区间之内,动态去缩放
oHtml.style.fontSize = screenWidth/(750/40) + 'px';
}
}
})()
关于rem,主要参考文档
1。腾讯ISUX (http://isux.tencent.com/web-app-rem.html)
2。http://www.w3cplus.com/css3/define-font-size-with-css3-rem
现在移动端 web app 的自适应布局的方案有 5种。
零. Flexbox
使用css3 flexbox 进行布局,对于富媒体和复杂排版的支持非常强大,未普及兼容性非常差,几乎没有在任何项目中得到应用。
一. 弹性布局
使用 em 或 rem 单位进行相对布局,相对 % 百分比更加灵活,同时可以支持浏览器的字体大小调整和缩放等的正常显示。 因为em是相对父级元素的原因 没有得到推广。
二. 流式布局(Fluid)
使用 % 百分比定义宽度,高度大都是用px来固定住,可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整,尽可能的适应各种分辨率。往往配合 max-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。代表作栅栏系统(网格系统)
三. 响应式布局(Responsive)
使用 @media 媒体查询 给不同尺寸和介质的设备切换不同的样。在优秀的响应范围设计下可以给适配范围内的设备最好的体验,在同一个设备下实际还是固定的布局。
四. 自适应布局( Adaptive)
通常使用 @media 媒体查询 和网格系统 (Grid System) 配合相对布局单位进行布局,实际上就是综合响应式、流动等上述技术通过 CSS 给单一网页不同设备返回不同样式的技术统称。自适应几乎已经成为优秀页面布局的标准。
这篇文章主要讲的是rem的使用。
css3 中引入了新的长度单位,rem。 官方定义 font size of the root element
rem:rem和em单位一样,都是一个相对单位。不同的是em是相对于元素的父元素的font-size进行计算;rem是相对于根元素html的font-size进行计算。这样一来rem就绕开了复杂的层级关系,实现了类似于em单位的功能。
兼容性:IE9+,Firefox、Chrome、Safari、Opera 的主流版本都支持。(IE6-8不支持 不过考虑是移动端web app )
1.针对设计稿 计算rem
所有浏览器都一致默认保持着 16px 的默认字号 1em:16px ,但是 1:16 的比例不方便计算。在这里文档元素设置 font-size: 62.5%,可以很方便的利用十进制进行计算了,(CSS 预处理工具可以使用默认值)
所以如果我有一个宽度为640的设计稿,通过上面的方法算出对应元素rem的大小 。(附注:实际项目不可以设置成 font-size: 62.5%,因为chrome不支持小于12px的字体,计算小于12px的时候,会默认取12px去计算,导致chrome的rem计算不准确)
2。针对不同分辨率计算font-size
监听浏览器更改 html的font-size
配合css预处理工具计算 rem 值。 Sass、LESS 、Stylus
em:继承父级的,假设html的font-size默认为16px,body字体大小定义为50%,那么在body里字体大小就是1em=8px了。可当你又定义了一个div,然后把字体设置成了50%,请问,现在div下的1em等于多少?因为继承了父级的值,现在这个div里的1em=4px,这么嵌套下去的话,抱歉,我数学不好!所有rem就出现了。
rem:是em的升级版,rem只会相对html的值,不会受到父级的影响,这样的好处在于:从em里的例子来讲,1rem始终会等于8px。使用的时候不需要重新计算rem此时的大小。rem因为是css3增加的,所以ie8或以下请无视。
以上也算是讲清了他们之间的区别和关系,rem更多的运用于移动H5页面的适配使用。
浏览器默认的字体大小都是16px(注意这里),所以要使1rem=10px,那么只要在html选择器中声明Font-size=62.5%(10÷16*100%=62.5%)就可以直接使用1rem=10px单位进行换算,其实这个算法是没有错的。可是,哪里来的自信让每个浏览器默认字体都是16px????反正我也不知道自信哪来。。现在Chrome默认大小可以是12px也可以是16px,那么问题来了,国内浏览器,有几个不是用的谷歌内核。所以html选择器中声明Font-size=62.5%,1rem就等于10px的换算就有点坑爹了。rem单位还是可以变的容易换算和精准。所以就去找了些工具和资料。
因为rem是相对html的,那么只要将html选择器设置一个绝对大小的值:比如在html选择器设置font-size:20px;那么1rem=20px(解释下为什么是20而不是其他的,首先10的倍数容易计算,那为什么不是10本身而是20?现在Chrome最小的字体是12px,所以10px是无效的,进一步就取20px);现在是不是和效果图一个像素都不差?!!且要兼容手机各个分别率,使用媒体查询media
可以设置不同的大小,这样在常规的设备中都可以精准到每一个像素。
方法一:下面是我直接在工具复制过来的现成rem换算适配代码↓(设计稿宽度:640,字体值:20)
@media only screen and (max-width: 1080px), only screen and (max-device-width:1080px) {
html,body {
font-size:16.875px;
}
}
@media only screen and (max-width: 960px), only screen and (max-device-width:960px) {
html,body {
font-size:15px;
}
}
@media only screen and (max-width: 800px), only screen and (max-device-width:800px) {
html,body {
font-size:12.5px;
}
}
@media only screen and (max-width: 720px), only screen and (max-device-width:720px) {
html,body {
font-size:11.25px;
}
}
@media only screen and (max-width: 640px), only screen and (max-device-width:640px) {
html,body {
font-size:10px;
}
}
@media only screen and (max-width: 600px), only screen and (max-device-width:600px) {
html,body {
font-size:9.375px;
}
}
@media only screen and (max-width: 540px), only screen and (max-device-width:540px) {
html,body {
font-size:8.4375px;
}
}
@media only screen and (max-width: 480px), only screen and (max-device-width:480px) {
html,body {
font-size:7.5px;
}
}
@media only screen and (max-width: 414px), only screen and (max-device-width:414px) {
html,body {
font-size:6.46875px;
}
}
@media only screen and (max-width: 400px), only screen and (max-device-width:400px) {
html,body {
font-size:6.25px;
}
}
@media only screen and (max-width: 375px), only screen and (max-device-width:375px) {
html,body {
font-size:5.859375px;
}
}
@media only screen and (max-width: 360px), only screen and (max-device-width:360px) {
html,body {
font-size:5.625px;
}
}
@media only screen and (max-width: 320px), only screen and (max-device-width:320px) {
html,body {
font-size:5px;
}
}
@media only screen and (max-width: 240px), only screen and (max-device-width:240px) {
html,body {
font-size:3.75px;
}
方法二 :所有的屏幕适配置
@media screen and (min-width: 300px) {
html {
/* 15 * 62.5% = 9.375 */
font-size: 9.375px;
}
}
@media screen and (min-width: 320px) {
html {
/* 16 * 62.5% = 10 */
font-size: 10px;
}
}
@media screen and (min-width: 340px) {
html {
/* 17 * 62.5% = 10.625 */
font-size: 10.625px;
}
}
@media screen and (min-width: 360px) {
html {
/* 18 * 62.5% = 11.25 */
font-size: 11.25px;
}
}
@media screen and (min-width: 375px) {
html {
/* 18.75 * 62.5% = 11.71875 */
font-size: 11.718px;
}
}
@media screen and (min-width: 380px) {
html {
/* 19 * 62.5% = 11.875 */
font-size: 11.875px;
}
}
@media screen and (min-width: 400px) {
html {
/* 20 * 62.5% = 12.5 */
font-size: 12.5px;
}
}
@media screen and (min-width: 414px) {
html {
/* 20.7 * 62.5% = 12.9375 */
font-size: 12.937px;
}
}
@media screen and (min-width: 420px) {
html {
/* 21 * 62.5% = 13.125 */
font-size: 13.125px;
}
}
@media screen and (min-width: 440px) {
html {
/* 22 * 62.5% = 13.75 */
font-size: 13.75px;
}
}
@media screen and (min-width: 460px) {
html {
/* 23 * 62.5% = 14.375 */
font-size: 14.375px;
}
}
@media screen and (min-width: 480px) {
html {
/* 24 * 62.5% = 15 */
font-size: 15px;
}
}
@media screen and (min-width: 500px) {
html {
/* 25 * 62.5% = 15.625 */
font-size: 15.625px;
}
}
@media screen and (min-width: 520px) {
html {
/* 26 * 62.5% = 16.25 */
font-size: 16.25px;
}
}
@media screen and (min-width: 540px) {
html {
/* 27 * 62.5% = 16.875 */
font-size: 16.875px;
}
}
@media screen and (min-width: 560px) {
html {
/* 28 * 62.5% = 17.5 */
font-size: 17.5px;
}
}
@media screen and (min-width: 580px) {
html {
/* 29 * 62.5% = 18.125 */
font-size: 18.125px;
}
}
@media screen and (min-width: 600px) {
html {
/* 30 * 62.5% = 18.75 */
font-size: 18.75px;
}
}
@media screen and (min-width: 620px) {
html {
/* 31 * 62.5% = 19.375 */
font-size: 19.375px;
}
}
@media screen and (min-width: 640px) {
html {
/* 32 * 62.5% = 20 */
font-size: 20px;
}
}
@media screen and (min-width: 660px) {
html {
/* 33 * 62.5% = 20.625 */
font-size: 20.625px;
}
}
@media screen and (min-width: 680px) {
html {
/* 34 * 62.5% = 21.25 */
font-size: 21.25px;
}
}
@media screen and (min-width: 700px) {
html {
/* 35 * 62.5% = 21.875 */
font-size: 21.875px;
}
}
@media screen and (min-width: 720px) {
html {
/* 36 * 62.5% = 22.5 */
font-size: 22.5px;
}
}
@media screen and (min-width: 740px) {
html {
/* 37 * 62.5% = 23.125 */
font-size: 23.125px;
}
}
@media screen and (min-width: 760px) {
html {
/* 38 * 62.5% = 23.75 */
font-size: 23.75px;
}
}
@media screen and (min-width: 780px) {
html {
/* 39 * 62.5% = 24.375 */
font-size: 24.375px;
}
}
@media screen and (min-width: 800px) {
html {
/* 40 * 62.5% = 25 */
font-size: 25px;
}
}
@media screen and (min-width: 1024px) {
html {
/* 51.2 * 62.5% = 32 */
font-size: 32px;
}
}
@media screen and (min-width: 1349px) {
html {
/* 67.45 * 62.5% = 42.15625 */
font-size: 42.156px;
}
}
方法三:用js计算
/* 注意:里面的一些值需要根据你自己的项目来动态改变 */
(function(){
// 获取html的标签
var oHtml = document.documentElement;
// 在页面上来的时候就调用一下
getSize();
// 当缩放屏幕时实时计算
window.addEventListener('resize', function(){
getSize();
})
function getSize(){
// 获取屏幕的大小
var screenWidth = oHtml.clientWidth;
if(screenWidth < 320){
// 当屏幕小于320的情况下,直接不予缩放
oHtml.style.fontSize = '17.778px';
}else if(screenWidth > 750){
// 当屏幕大于640的情况下,直接不予缩放
oHtml.style.fontSize = '40px';
}else{
// 在这个区间之内,动态去缩放
oHtml.style.fontSize = screenWidth/(750/40) + 'px';
}
}
})()
关于rem,主要参考文档
1。腾讯ISUX (http://isux.tencent.com/web-app-rem.html)
2。http://www.w3cplus.com/css3/define-font-size-with-css3-rem
现在移动端 web app 的自适应布局的方案有 5种。
零. Flexbox
使用css3 flexbox 进行布局,对于富媒体和复杂排版的支持非常强大,未普及兼容性非常差,几乎没有在任何项目中得到应用。
一. 弹性布局
使用 em 或 rem 单位进行相对布局,相对 % 百分比更加灵活,同时可以支持浏览器的字体大小调整和缩放等的正常显示。 因为em是相对父级元素的原因 没有得到推广。
二. 流式布局(Fluid)
使用 % 百分比定义宽度,高度大都是用px来固定住,可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整,尽可能的适应各种分辨率。往往配合 max-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。代表作栅栏系统(网格系统)
三. 响应式布局(Responsive)
使用 @media 媒体查询 给不同尺寸和介质的设备切换不同的样。在优秀的响应范围设计下可以给适配范围内的设备最好的体验,在同一个设备下实际还是固定的布局。
四. 自适应布局( Adaptive)
通常使用 @media 媒体查询 和网格系统 (Grid System) 配合相对布局单位进行布局,实际上就是综合响应式、流动等上述技术通过 CSS 给单一网页不同设备返回不同样式的技术统称。自适应几乎已经成为优秀页面布局的标准。
这篇文章主要讲的是rem的使用。
css3 中引入了新的长度单位,rem。 官方定义 font size of the root element
rem:rem和em单位一样,都是一个相对单位。不同的是em是相对于元素的父元素的font-size进行计算;rem是相对于根元素html的font-size进行计算。这样一来rem就绕开了复杂的层级关系,实现了类似于em单位的功能。
兼容性:IE9+,Firefox、Chrome、Safari、Opera 的主流版本都支持。(IE6-8不支持 不过考虑是移动端web app )
1.针对设计稿 计算rem
所有浏览器都一致默认保持着 16px 的默认字号 1em:16px ,但是 1:16 的比例不方便计算。在这里文档元素设置 font-size: 62.5%,可以很方便的利用十进制进行计算了,(CSS 预处理工具可以使用默认值)
1 2 3 | html { font-size : 62.5% ; /*10 ÷ 16 × 100% = 62.5%*/ } body { font-size : 1.4 rem; /*1.4 × 10px = 14px */ } h 1 { font-size : 2.4 rem; /*2.4 × 10px = 24px*/ } |
2。针对不同分辨率计算font-size
监听浏览器更改 html的font-size
1 2 3 4 5 6 7 8 9 10 11 12 13 | ( function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize' , recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return ; docEl.style.fontSize = 20 * (clientWidth / 320) + 'px' ; }; if (!doc.addEventListener) return ; win.addEventListener(resizeEvt, recalc, false ); doc.addEventListener( 'DOMContentLoaded' , recalc, false ); })(document, window); |
相关文章推荐
- web app 自适应方案总结 关键字 弹性布局之rem
- web app 自适应方案总结 关键字 弹性布局之rem
- web app 自适应方案总结 关键字 弹性布局之rem
- web app 自适应方案总结 关键字 弹性布局之rem
- web app 自适应方案总结 关键字 弹性布局之rem
- web app 自适应方案总结 弹性布局之rem
- web app 自适应 弹性布局之rem
- 移动端web app自适应布局探索与总结
- 移动端web app自适应布局探索与总结
- rem自适应布局的回顾总结
- 移动端web app自适应布局探索与总结
- 移动端Web App自适应布局探索与总结
- 移动端Web App自适应布局探索与总结
- 移动端web app自适应布局探索与总结
- rem自适应布局的回顾总结
- 移动端web app自适应布局探索与总结
- js中flexible.js实现淘宝弹性布局方案
- js中flexible.js实现淘宝弹性布局方案
- Swift - 使用Auto Layout和Size Classes实现页面自适应弹性布局
- 淘宝弹性布局方案lib-flexible实践