zoukankan      html  css  js  c++  java
  • 移动端页面适配,rem布局

    移动端页面适配

    em 根据元素自身的字体大小来计算自己的尺寸

    rem root em 根据根节点(html)的字体大小来计算自己的尺寸

                      

    适配: 各个移动设备,分辨率大小不一致,使我们的页面在各种分辨率下都显示完好(等比的缩放);

    根据屏幕的分辨率

    动态的设置html的字体大小,来达到页面等比缩放的功能

    注意:保证html最终算出来的字体大小 不能小于 12

    在最开始先设置一段js代码,获得屏幕宽度,这段js优先于任何css和js

    <script>

    (function() {

                       var html = document.querySelector("html");

                       var width = html.getBoundingClientRect().width;

                       html.style.fontSize = width / 16 + "px";

                       //  width / 16  html的字体大小 = 屏幕宽度的16分之一 = 1rem

                       //  270 /

                       //console.log(html.getBoundingClientRect());

             })();

    </script>

    html.getBoundingClientRect().width; //获得屏幕宽度

    像素比

    alert(window.devicePixelRatio); //像素比 像素比为2 用两个像素的大小去显示 1px的内容

    // 最好设计图的宽度都保持在 750以上

    剑还未备好,身已在江湖
  • 相关阅读:
    BZOJ1143: [CTSC2008]祭祀river
    接口自动化测试平台-接入持续集成jenkins
    mac OS npm 安装/卸载失败 权限问题解决方案
    初入React源码(一)
    初入React源码(一)
    mac OS git关联github
    重识TCP/IP协议族与HTTP基础
    重识TCP/IP协议族与HTTP基础
    Visual Studio Code mac OS 安装 中文简体语言包
    C#加密类
  • 原文地址:https://www.cnblogs.com/cjie/p/6115260.html
Copyright © 2011-2022 走看看