[移动端WEB] 移动端网站响应式布局之"rem"，CSS3 rem使用方式
2024-10-15 17:44:35
(function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
var clientWidth = docEl.clientWidth;
if(!clientWidth) return;
// if(clientWidth>=640){
// docEl.style.fontSize = '100px';
// }else{
// docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
// }
docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
};
if(!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
1.根据设计图的大小修改图中的值。当前为 640 ，然后使用的rem值就为设计图的值/100为rem的值
当然也可以用媒体查询当然有点复杂
$sjt_whdth:640;
@media (min-width: 320px) {
html {
font-size:100px*(320/$sjt_whdth) ;
}
}
@media (min-width: 360px) {
html {
font-size: 100px*(360/$sjt_whdth);
}
}
@media (min-width: 375px) {
html {
font-size: 100px*(375/$sjt_whdth) ;
}
}
@media (min-width: 414px) {
html {
font-size: 100px*(414/$sjt_whdth) ;
}
}
@media (min-width: 765px) {
html {
font-size: 100px*(765/$sjt_whdth) ;
}
}
@media (min-width: 1020px) {
html {
font-size: 100px*(1020/$sjt_whdth) ;
}
}
@media (min-width: 1280px) {
html {
font-size: 100px*(1280/$sjt_whdth) ;
}
}
@media (min-width: 1360px) {
html {
font-size: 100px*(1360/$sjt_whdth) ;
}
}
@media (min-width: 1600px) {
html {
font-size: 100px*(1600/$sjt_whdth) ;
}
}
@media (min-width: 1920px) {
html {
font-size: 100px*(1920/$sjt_whdth) ;
}
}
1.小编习惯scss写css了所以里面会有算法，实际上是不可以的
2.这里的320px 下的0.5px是什么呢？？ 0.5是320/640的值。用当前宽度/设计图宽度 ，其中px只是一个单位
最新文章
- eclipse编辑器配置
- 记录Tomcat7.x热部署配置过程
- Java程序员的日常 —— 《编程思想》持有对象
- C#复习⑨（附带C#参考答案仅限参考）
- 【jquery】jquery.cookie.js 的使用指南
- iOS开发 仿淘宝,京东商品详情3D动画
- editplus 常用快捷键汇总 大小写代码折叠
- hdu1232 畅通工程
- oracle PL/SQL（procedure language/SQL）程序设计--控制结构（if else ）
- [Angular 2] Pipes with Multiple Parameters
- 杂记之web篇
- 自定义窗口 mfc
- Could not find class 'XXX.activity‘', referenced from method 'YYYY'
- netty入门篇(1)
- Unity3D换装系统
- vimgdb安装
- JAVA第二次实训作业
- Runtime之成员变量&属性&关联对象
- Bootstrap学习记录-3.Badge、Breadcrumb、Buttons、 Button Group、Card、Carousel
- git 放弃本地修改