自适应响应式布局-实现原理

Posted 2020-08-17 rnet

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-width: 400px)] and (max-device-width: 600px)" href="xxx.css" />

　　2).css文件加载：效果和网页文件加载相同：@import url("tinyScreen.css") screen [and (min-width: 400px)] and (max-device-width: 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-width: 100%;height: auto;}

6.重定义盒子宽度，让宽度包含border 和 padding：

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}