zoukankan      html  css  js  c++  java
  • html5适应屏幕的方案

          适应屏幕的方案:

    1、css3 Media queries (针对多版本设计稿)

    2、设计稿不复杂的时候 通过宽度自适应用百分比

    3、通过更新meta:viewport标签,通过设计稿尺寸和设备尺寸的比例去设置


    优点:

    1、简单易懂,不需要JavaScript的支持,跨度大

    2、适应能力强,代码量较少

    3、适应能力强,针对不同的屏幕基本都可以适应


    缺点:

    1、代码量冗余,需要针对不同的屏幕尺寸去处理,

    2、对设计稿有限制

    3、页面比较大的时候,加载显示的时候会重绘(待验证)


    1、可视区域宽度小于600的时候回应用

    @media screen and (max- 600px) {
      .class {
        background: #ccc;
      }
    }

    3、根据设计稿和devicewidth 获得bfb 

    var design = 420,device = document.documentElement.clientWidth;
         var bfb = (device/design).toFixed(1);
        
        var atts = "width="+design+", user-scalable=no, initial-scale="+bfb+", maximum-scale="+bfb+", minimum-scale="+bfb
         id.setAttribute("content",atts);

  • 相关阅读:
    Linux libcurl使用 (收藏)
    公钥和私钥与认证和签名
    fedora下配置ipv6 dns服务器
    SHA1
    linux IP 命令
    SSL/TLS协议簇加解密流程
    MD5算法实现原理
    container_of深入理解
    diff和patch使用指南
    oracle 笔记
  • 原文地址:https://www.cnblogs.com/lyg0126/p/6854054.html
Copyright © 2011-2022 走看看