美文网首页
css rem 布局

css rem 布局

作者: black白先森 | 来源:发表于2016-10-08 17:51 被阅读19次
  • 以320为基准
/**
 * 手机页面自适应
 * 320px 下为 1rem = 20px 
 * 
 */
(function (doc, win) {
    var docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
        var clientWidth = docEl.clientWidth;
        if (!clientWidth) return;
        if(clientWidth > 800) clientWidth=800;
        docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
    };
    
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    //doc.addEventListener('DOMContentLoaded', recalc, false);
    recalc();
})(document, window);

相关文章

  • CSS真的很麻烦,把CSS语法学会了,提升你的编码能力还是绰绰有

    css3画热咖啡 css自适应布局方案 一、百分比布局宽度百分比,高度px布局 二、rem布局①自定义rem尺寸 ...

  • h5自适应布局

    首先贴出js原生自适应布局的代码: 这是rem布局的核心代码。 什么是rem?rem是个低调的css单位,手淘在移...

  • 前端技能

    HTML 常用标签/分类/属性 标签的分类 CSS 布局:position、float 响应式布局:rem布局(移...

  • css rem 布局

    以320为基准

  • CSS rem布局

    1. 什么是rem 2. 使用rem 3. 实例展示3.1. 看小说时,小中大三种展示方式3.2. 移动端开发技巧...

  • Vue移动端适配方案.md

    移动端主要采用rem布局,vue+webpack,通过webpack编译,将css中px自动转成rem或其它单位,...

  • 自适应rem布局

    rem是个低调的css单位,手淘在移动端的布局是基于rem处理的,当然还要基于viewport的处理。用rem单位...

  • 2019-08-29

    px、rem、em的区别 随着css学习的不断深入页面也随之丰富,那么em、rem、px是我们在页面布局中经常会用...

  • 我的前端技能树

    HTML 常见标签和属性 HTML5 CSS 常用选择器 常用样式和布局 响应式布局(了解,并不熟悉) rem 的...

  • CSS3核心高级技巧

    CSS3开发常备核心技能 早期的双飞翼布局 + CSS HACK 基于移动端的PX与rem转换兼容方案 弹性盒模型...

网友评论

      本文标题:css rem 布局

      本文链接:https://www.haomeiwen.com/subject/dtouyttx.html