zoukankan      html  css  js  c++  java
  • 自适应响应式布局-实现原理

    1.添加viewport元标签

    <meta name="viewport" content="width=device-width, initial-scale=1" />  //width=device-width:网页宽度默认为设备宽度,initial-scale=1:初始缩放比例为1,即页面大小占屏幕的100%。

    2.区块设置为浮动定位(float),width设置为百分比或者auto。

    3.选择性加载css文件:

      1).网页文件加载:当屏幕最大到600px[或者到指定区间400px-600px]时加载指定css文件:<link rel="stylesheet" type="text/css" media="screen [and (min- 400px)] and (max-device- 600px)" href="xxx.css" />

      2).css文件加载:效果和网页文件加载相同:@import url("tinyScreen.css") screen [and (min- 400px)] and (max-device- 600px);

      3).jquery选择加载:

    $(function(){
      $(window).bind("resize",resizeWindow);
      function resizeWindow(e){
        var newWindowWidth=$(window).width();
        if(newWindowWidth<600){
          $("link[rel=stylesheet]").attr("href":"xxx1.css");
        }else if (newWindowWidth>600) {
          $("link[rel=stylesheet]").attr("href":"xxx2.css");
        }
      }
    });

    4.媒体查询:当屏幕最大到600px[或者到指定区间400px-600px]时设置css属性:@media screen [and (min-width: 400px)] and (max-width: 600px) { css代码 }

    5.图片自适应:img { max- 100%;height: auto;}

    6.重定义盒子宽度,让宽度包含border 和 padding:

    *, *:before, *:after {
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
    }
  • 相关阅读:
    MMoE论文笔记
    李宏毅-ELMO, BERT, GPT
    vue 手写一个时间选择器
    this 的几种使用场景
    如何使用markdown编辑器编写文章
    sublime text 3 入门技巧与常见问题解决
    Flex布局介绍
    在github上实现页面托管预览功能
    数据挖掘经典算法——最大期望算法
    数据挖掘经典算法——先验算法
  • 原文地址:https://www.cnblogs.com/zhenxianluo/p/6038138.html
Copyright © 2011-2022 走看看