(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只是一个单位

[移动端WEB] 移动端网站响应式布局之"rem",CSS3 rem使用方式的更多相关文章

  1. 从零开始学 Web 之 移动Web(六)响应式布局

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  2. css3媒体查询实现网站响应式布局

    最常见的办法就是基类(最常用的网站布局)+扩展类(几种不同的网站布局类)来实现不同的布局. <!–使用说明:网站基本布局,使用class="layout";使用ipad访问时 ...

  3. 网站响应式布局/网站自适应问题+rem、em、px、pt及网站字体大小设配

    Bootstrap 网格系统: Bootstrap CSS: Bootstrap 组件及插件: 一.什么是响应式布局?       响应式布局是Ethan Marcotte在2010年5月份提出的一个 ...

  4. html5/css3响应式布局介绍及设计流程

    html5/css3响应式布局介绍 html5/css3响应式布局介绍及设计流程,利用css3的media query媒体查询功能.移动终端一般都是对css3支持比较好的高级浏览器不需要考虑响应式布局 ...

  5. flex布局 响应式布局

    移动端页面开发流程   移动端页面布局 一.移动端app分类 1.Native App原生app手机应用程序 使用原生的语言开发的手机应用,Android系统用的是java,ios系统用的是objec ...

  6. 你不知道的css各类布局(四)之响应式布局

    响应式布局 概念 响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局 布局特点 响应式设计的目标是确保一个页面在所有终端上(各种尺寸的PC.手机.手表.冰箱的Web浏览器等等)都能显示出令人满意的效 ...

  7. 静态布局、自适应布局、流式布局、响应式布局、弹性布局简析、BFC

    静态布局:给页面元素设置固定的宽度和高度,单位用px,当窗口缩小,会出现滚动条,拉动滚动条显示被遮挡内容.针对不同分辨率的手机端,分别写不同的样式文件.例如:浏览器窗口是1000px,那么最小的宽度是 ...

  8. 响应式布局rem的使用

    在如今移动端,响应式布局的时代,用rem作为单位已经是非常普及的一门小技巧了..rem的单位根据html的font-size来进行换算! 1.rem的兼容性: 如下图所示IE9以上就支持了rem这个属 ...

  9. Bootstrap响应式布局介绍

    一.响应式布局 1.什么是响应式网页 2.响应式网页必须做到的几件事 1.布局,使用流式布局(默认文档流+浮动)+弹性布局+栅格布局 2.文字和图片大小随着容器大小改变 3.媒体查询技术(css3) ...

随机推荐

  1. Highcharts纯Javascript图表使用讲解

    Highcharts提供大量的选项配置参数,您可以轻松定制符合用户要求的图表,目前官网只提供英文版的开发配置说明文档,而中文版的文档网上甚少,且零散不全.这里,我把Highcharts常用的最核心的参 ...

  2. git 查看提交记录

    查看提交的内容 -p 选项,同时在 - 后加数字限制一下数目 git log -p -2. commit 500eeadd71a21f1166803e12a792bfa86f4ca784 (HEAD ...

  3. 异步加载的JS如何在chrome浏览器断点调试?

    我们常常利用chrome强大的控制台Sources下面进行代码断点调试,但是通过$.getScript等异步加载JS的方式在Sources里面就是找不到,那如何进行debug断点调试呢? 方案一: 在 ...

  4. Vim实用技巧系列 - 代码注释

    在写代码时候,有时候需要临时注释掉一部分代码,之后还要取消这些注释.真麻烦.那么,用Vim怎么做这件事呢? 第一种方法,块模式.                 再次声明,本系列全部以windows下 ...

  5. 剑指offer五十九之按之字形顺序打印二叉树

    一.题目 请实现一个函数按照之字形打印二叉树,即第一行按照从左到右的顺序打印,第二层按照从右至左的顺序打印,第三行按照从左到右的顺序打印,其他行以此类推.二.思路 详见代码 三.代码 import j ...

  6. java文件上传-原始的Servlet方式

    前言: 干了这几个项目,也做过几次文件上传下载,要么是copy项目以前的代码,要么是百度的,虽然做出来了,但学习一下原理弄透彻还是很有必要的.刚出去转了一圈看周围有没有租房的,在北京出去找房子是心里感 ...

  7. (win 7)使用puma以后,重启rails server报错: in `trap': unsupported signal SIGCHLD (ArgumentError)

    如图: 解决方案: 把config/puma.rb 文件中的 workers Integer(ENV['WEB_CONCURRENCY'] || 2) 改成 workers Integer(ENV[' ...

  8. Android4.0以上版本比较靠谱的获取手机屏幕分辨率的方法

    /** * 获取虚拟按键栏高度 * * @param context * @return */ public static int getNavigationBarHeight(Context con ...

  9. freepbx对接gms网关

    前面的文章阿里云使用镜像安装freepbx , 安装freepbx后创建sip分机 ,freepbx的SIP通话客户端X-lite Yate eyeBeam Linphone我们已经成功的创建好了分机 ...

  10. Oracle 12c 建表空间语句

    create tablespace TBS_DYS datafile 'D:/Oracle_12c/app/dingyingsi/oradata/dingyingsi/TBS_DYS.ba' size ...