个人收藏的移动端网页布局rem解决方案

写移动端项目时，总是会纠结是用css3 media query 还是用rem。移动端框架挺多，但是因为项目都比较小，不考虑使用。

无意在网上找到一个移动端rem布局的解决方案，经个人实践，目前未出现什么大问题，收藏备用。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>移动端rem布局</title><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" /><style>.test{width: 1rem;height: 1rem;background-color: #fa5275;}</style>
</head>
<body><div class="test"></div><p>设置前html的fontsize:16px;</p><p>设置前html的fontsize:16px;</p><script>function adapt(designWidth, rem2px){var d = window.document.createElement('div');d.style.width = '1rem';d.style.display = "none";var head = window.document.getElementsByTagName('head')[0];head.appendChild(d);var defaultFontSize = parseFloat(window.getComputedStyle(d, null).getPropertyValue('width'));d.remove();document.documentElement.style.fontSize = window.innerWidth / designWidth * rem2px / defaultFontSize * 100 + '%';var st = document.createElement('style');var portrait = "@media screen and (min-width: "+window.innerWidth+"px) {html{font-size:"+ ((window.innerWidth/(designWidth/rem2px)/defaultFontSize)*100) +"%;}}";var landscape = "@media screen and (min-width: "+window.innerHeight+"px) {html{font-size:"+ ((window.innerHeight/(designWidth/rem2px)/defaultFontSize)*100) +"%;}}"
            st.innerHTML = portrait + landscape;head.appendChild(st);return defaultFontSize;}var defaultFontSize = adapt(640, 100);</script>
</body>
</html>

转载于:https://www.cnblogs.com/sapho/p/6184146.html

个人收藏的移动端网页布局rem解决方案相关推荐

移动端网页布局中需要注意事项以及解决方法总结
移动端网页布局中需要注意事项以及解决方法总结,这份对我们在布局移动端网页的时候非常有用! winphone系统a.input标签被点击时产生的半透明灰色背景怎么去掉 <meta name=&qu ...
移动端网页布局（携程网）
移动端网页布局(携程网) HTML部分 <!DOCTYPE html> <html lang="en"><head><meta chars ...
Web移动端Fixed布局的解决方案
Web移动端Fixed布局的解决方案参考文章: (1)Web移动端Fixed布局的解决方案 (2)https://www.cnblogs.com/sxgxiaoge/p/9257648.html 备 ...
【移动端网页布局】移动端网页布局基础概念 ⑧ ( 移动端页面布局方案 | 单独制作的移动端页面 - 主流 | 响应式页面兼容移动端 - 开发难度较大 )
文章目录一.移动端页面布局方案 1.单独制作的移动端页面 2.响应式页面兼容移动端一.移动端页面布局方案移动端页面方案 : 单独制作的移动端页面 : 主流开发方案 , PC 端与移动端访问 ...
【移动端网页布局】移动端网页布局基础概念 ② ( 视口 | 布局视口 | 视觉视口 | 理想视口 )
文章目录一.视口 1.布局视口 ( 网页大小 | 网页大小 > 设备大小 ) 2.视觉视口 ( 设备大小 | 网页大小 > 设备大小 ) 3.理想视口 ( 网页大小 = 设备大小 ) 一 ...
【移动端网页布局】移动端网页布局基础概念 ① ( 移动端浏览器 | 移动端屏幕分辨率 | 移动端网页调试方法 )
文章目录一.移动端浏览器二.移动端屏幕分辨率三.移动端网页调试方法一.移动端浏览器移动端浏览器比 PC 端浏览器发展要晚 , 使用的技术比较新 , 对 HTML5 + CSS3 支持较好 ...
【移动端网页布局】流式布局案例 ④ ( Banner 栏制作 | 固定定位 | 标准流 | 百分比宽度设置 )
文章目录一.Banner 栏样式及核心要点 1.实现效果 2.核心要点分析二.完整代码示例 1.HTML 标签结构 2.CSS 样式 3.展示效果一.Banner 栏样式及核心要点 1.实现效果 ...
【移动端网页布局】移动端网页布局基础概念 ⑤ ( 视网膜屏技术 | 二倍图概念 | 代码示例 )
文章目录一.视网膜屏技术二.二倍图概念三.代码示例一.视网膜屏技术 PC 端和早期的移动端网页中 , CSS 中配置的 1 像素对应的就是物理屏幕中的 1 像素 ; Retina 视 ...
rem适配的浏览器_移动端网页布局适配rem方案小结
前言根据 W3C 规范中对 1rem 的定义: 1rem 与等于根元素 font-size 的计算值.当明确规定根元素的 font-size 时,rem 单位以该属性的初始值作参照. 这就意味着 1 ...
PC端网页布局——世纪佳缘（二）页面初搭建
咱们首先来搭建一下整体的大结构: 效果如下: 每一块呢,都是使用div块做的,并不难理解除了头部之外,每一块都是外面一个大的div,里面再包一个小的div,也就是所谓的通栏和版心(由于个人问题,版心 ...

个人收藏的移动端网页布局rem解决方案

个人收藏的移动端网页布局rem解决方案相关推荐

最新文章

热门文章