布局与响应式设计-优快云博客

1、水平垂直居中布局

（一）https://www.html.cn/qa/css3/19614.html -- 介绍了text-align , line-height, margin适用场景，flex，transform，table布局使用

（二）https://m.html.cn/qa/css3/15320.html -- 相比（一）介绍更详细

重点：

　　对于Web开发者来说，网页布局一直是个比较重要的问题。但实际上，在网页开发很长的一段时间当中，我们甚至没有一个比较完整的布局模块。总的来说 Web 布局经历了以下四个阶段：

　　1、table表格布局，通过 Dreamweaver 拖拽表格或者手写 table 标签布局
　　2、float浮动及position定位布局，借助元素元素盒模型本身的特性以及 display position float 等属性等进行布局
　　3、flex弹性盒模型布局，革命性的突破，解决传统布局方案上的三大痛点排列方向、对齐方式，自适应尺寸。是目前最为成熟和强大的布局方案
　　4、grid栅格布局，二维布局模块，具有强大的内容尺寸和定位能力，适合需要在两个维度上对齐内容的布局

　　Grid Layout 是一种基于二维网格的布局系统，旨在完全改变我们设计基于网格的用户界面的方式，弥补网页开发在二维布局能力上的缺陷

　　与flex分为伸缩容器和伸缩项目类似，grid也分为网格容器和网格项目。

Grid布局方式借鉴了平面装帧设计中的格线系统，将格线运用在屏幕上，而不再是单一的静态页面，可以称之为真正的栅格。

应用：

flex属性 -- https://www.cnblogs.com/watermelons/p/11777866.html

2、CSS样式兼容不同机型

（一）https://www.html.cn/qa/css3/15250.html -- css不能判断手机是安卓还是ios，css只能通过媒体查询判断屏幕宽度。判断是安卓还是ios需要使用javascript。

（二）https://blog.youkuaiyun.com/maodoudou1217/article/details/51241725 -- H5 页面适配所有 iPhone 和安卓机型的六个技巧

重点：

@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

@media 语法 -- https://www.runoob.com/cssref/css3-pr-mediaquery.html https://zhidao.baidu.com/question/1988207125664534747.html

@media mediatype and|not|only (media feature) {
CSS-Code;
}

应用：

屏占比适配：

@media only screen and (max-aspect-ratio: 90 / 161) {

IPhone刘海屏适配：

/*iPhone X，iPhone XS*/
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
  .pab-nav-fixed {
    height: 1.76rem !important;
    padding-top: .88rem !important;
  }

}
/*iPhone XS  Max*/
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) {
  .pab-nav-fixed {
    height: 1.76rem !important;
    padding-top: .88rem !important;
  }
}
/*iPhone XR*/
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) {
  .pab-nav-fixed {
    height: 1.76rem !important;
    padding-top: .88rem !important;
  }
}

设备像素比适配：


/* 普通显示屏(设备像素比例小于等于1)使用1倍的图 */
  .css{
      background-image: url(img_1x.png);
  }
 
  /* 高清显示屏(设备像素比例大于等于2)使用2倍图  */
  @media only screen and (-webkit-min-device-pixel-ratio:2){
      .css{
    background-image: url(img_2x.png);
      }
  }
 
  /* 高清显示屏(设备像素比例大于等于3)使用3倍图  */
  @media only screen and (-webkit-min-device-pixel-ratio:3){
      .css{
    background-image: url(img_3x.png);
      }

3、响应式布局

（一）

（二）

重点：

Bootstrap 的网格系统（Grid System）：Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

应用：