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.csdn.net/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列。
应用: