通过媒体查询meta和JS转换REM单位实现100%自适应
2016-05-27 15:18
561 查看
移动端页面设置根节点(html)font-size大小转换REM单位实现100%自适应,通过媒体查询meta和JS两种方法实现 第一种方法 媒体查询 meta - REM单位字体设置 /* 媒体查询 - 字体设置 */ /* 平滑过渡 */ html{ -webkit-transition: font-size .2s ease-out; transition: font-size .2s ease-out; } /* 设计稿宽度=640时, 4rem=400px, 1rem=100px, .5rem = 50px, .1rem = 10px 以此类推 */ @media screen and (max-width: 1280px) { html{ font-size: 200px; } } @media screen and (max-width: 1200px) { html{ font-size: 187.5px; } } @media screen and (max-width: 1120px) { html{ font-size: 175px; } } @media screen and (max-width: 1080px) { html{ font-size: 168.75px; } } @media screen and (max-width: 960px) { html{ font-size: 150px; } } @media screen and (max-width: 880px) { html{ font-size: 137.5px; } } @media screen and (max-width: 840px) { html{ font-size: 131.25px; } } @media screen and (max-width: 800px) { html{ font-size: 125px; } } @media screen and (max-width: 720px) { html{ font-size: 112.5px; } } @media screen and (max-width: 640px) { html{ font-size: 100px; } } @media screen and (max-width: 600px) { html{ font-size: 93.75px; } } @media screen and (max-width: 560px) { html{ font-size: 87.5px; } } @media screen and (max-width: 480px) { html{ font-size: 75px; } } @media screen and (max-width: 400px) { html{ font-size: 62.5px; -webkit-transition: none; } } @media screen and (max-width: 360px) { html{ font-size: 56.25px; } } @media screen and (max-width: 320px) { html{ font-size: 50px; } }
/* 设计稿宽度=640时, 4rem=400px, 1rem=100px, .5rem = 50px, .1rem = 10px 以此类推 */
@media screen and (max-width: 640px) {
html{ font-size: 100px; }
}
100px*0.01 = 1rem
示例:
img{width:40px, height:35px}
转换rem 40px*0.01 = 0.04rem, 35px*0.01 = 0.035rem
img{width:0.01rem, height:0.035rem}
@media screen and (max-width: 640px) {
html{ font-size: 40px; }
}
40px*0.025 = 1rem
示例:
img{width:40px, height:35px}
转换rem 40px*0.025 = 1rem, 35px*0.025 = 0.875rem
img{width:1rem, height:0.875rem}
@media screen and (max-width: 640px) {
html{ font-size: 20px; }
}
20px*0.05 = 1rem
示例:
img{width:40px, height:35px}
转换rem 40px*0.05 = 2rem, 35px*0.05 = 1.75rem
img{width:2rem, height:1.75rem}
第二种方法
JS根据设备宽度设置根节点(html)font-size字体大小
(function () { document.addEventListener('DOMContentLoaded', function () { var deviceWidth = document.documentElement.clientWidth; document.documentElement.style.fontSize = deviceWidth / 6.4 + 'px'; }, false); window.onresize = function(){ var deviceWidth = document.documentElement.clientWidth; document.documentElement.style.fontSize = deviceWidth / 6.4 + 'px'; }; })();
相关文章推荐
- js+css使文本框自动适应内容的高度
- Jquery实现textarea根据文本内容自适应高度
- jQuery实现等比例缩放大图片让大图片自适应页面布局
- Iframe实现跨浏览器自适应高度解决方法
- javascript实现瀑布流自适应遇到的问题及解决方案
- 使用javascript实现Iframe自适应高度
- Android中让图片自适应控件的大小的方法
- Android制作漂亮自适布局键盘的方法
- 基于JTable的列宽与内容自适应的实现方法
- 详解iOS tableViewCell自适应高度 第三发类库
- 关于UITabelViewCell的自适应
- 搜索框 - div中input自适应
- 移动端网页大小自适应的实现方法
- CSS左侧固定宽 右侧自适应的实现代码(兼容所有浏览器)
- 使用CSS媒体查询创建响应式布局教程
- 媒体查询---响应式设计小实例
- android控件根据屏幕大小自适应
- SHINE OPENCART 自适应 多用途主题模板 ABC-0021
- css背景自适应分辨率大小
- 移动端 h5开发相关内容总结——CSS篇