流式布局（百分比布局）
- 流失布局，就是百分比布局，也称非固定像素布局
- 通过将盒子的宽度设置成百分比，从而根据屏幕宽度来进行伸缩，不受固定像素的限制，内容向两侧填充
- 制作过程中，需要定义页面的最大和最小支持宽度
- max-width 最大宽度 （ max-height 最大高度）
- min-width 最小宽度 （ min-height 最小高度）
flex布局
- 弹性布局，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局
- 当我们为父盒子设为flex布局后，子元素的float、clear和vertical-align属性将失效
- 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局
- 采用flex布局的元素，称为flex容器，简称“容器”。它的所以子元素自动成为容器成员，称为flex项目，简称“项目”。
- flex布局原理：通过给父盒子添加flex属性，来控制子盒子的位置和排序方式
- 特点
- 操作方便，布局极为简单，移动端应用很广泛
- PC端浏览器支持情况较差，IE11或更低版本不支持或仅部分支持
- 常见属性
- 父项
-
flex-direction:设置主轴的方向
-
justify-content:设置主轴的子元素排列方式
-
flex-wrap:设置子元素是否换行
-
align-content:设置侧轴上的子元素的排列方式（多行）
-
align-items:设置侧轴上的子元素的排列方式（单行）
-
flex-flow:复合属性，相当于同时设置了flex-direction和flex-wrap
.box{ display:flex; flex-direction: row; /* 默认值从左到右*/ flex-direction: row-reverse; /* 从右到左*/ flex-direction: column; /*从上到下*/ flex-direction: column-reverse; /* 从下到上*/ justify-content: flex-start; /* 默认值 从头部开始右*/ justify-content: flex-end; /* 从尾部开始*/ justify-content: center; /*在主轴居中对齐*/ justify-content: space-around; /*平分剩余空间*/ justify-content: space-between; /*先两边贴边 再平分剩余空间*/ flex-wrap:nowrap; /*默认值，不换行*/ flex-wrap:wrap; /*换行*/ align-items:flex-start; /*默认值 从上到下*/ align-items:flex-end; /*从下到上*/ align-items:center; /*挤在一起居中（垂直居中）*/ align-items:streth; /*拉伸*/ align-content:flex-start; /*从侧轴的头部开始排列*/ align-content:flex-end; /*从侧轴的尾部开始排列*/ align-content:center; /*在侧轴中间显示*/ lign-content:space-around; /*子项在侧轴平分剩余空间*/ lign-content:space=between; /*子项在侧轴先分布在两头，再平分剩余空间*/ align-content:streth; /*设置子项元素高度平分父元素高度*/ flex-flow:row nowrap; /*复合属性*/ } ```
-
- 子项
-
flex 子项目占的份数
-
align-self 控制子项自己在侧轴的排列方式(默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch)
-
order属性定义子项的排列顺序（前后顺序,数值越小，排列越靠前，默认为0，和z-index不一样）
.item{ flex:1; /*default 0*/ } span:nth-child(2){ align-self:flex-end; } .item:nth-child(2){ order:-1; }
-
- 父项
less+rem+媒体查询
rem
- rem(root em) 是一个相对单位，类似与em，em是父元素字体大小
- rem 基准是相对于<html>元素的字体大小。比如，根元素（html）设置font-size=12px;非根元素设置width:2rem;转换成px表示就是24px;
- rem的优势：父元素文字大小可能不一致，但是整个页面只有一个<html>，可以很好的来控制整个页面的元素大小比例
媒体查询
-
简介 – css新语法
- 使用@media查询，可以针对不同的俄媒体类型定义不同的样式
- @media可以针对不同的屏幕尺寸设置不同的样式
- 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
- 目前针对很多苹果手机、Android手机，平板等设备都用的到多媒体查询
-
语法规范
- 用@media开头注意@符号
- mediatype 媒体类型
- 关键字 and|not|only
- media feature 媒体特征 必须有小括号包含
@media mediatype and|not|or|only (media feature) { }- mediatype媒体类型，all-用于所有设备，print-用于打印机和打印预览，screen-用于电脑屏幕，平板电脑，智能手机等
-
实现
/* 1.屏幕小于等于539px 时，背景为蓝色 */ @media screen and (max-width: 539px) { body { background-color: blue; } } /* 2.屏幕大于等于540px 并且 小于等于 969px 时，背景为绿色 */ /* @media screen and (min-width: 540px) and (max-width: 969px) { body { background-color: green; } } */ @media screen and (min-width: 540px) { body { background-color: green; } } /* 3.屏幕大于等于 970px 时，背景为红色 */ @media screen and (min-width: 970px) { body { background-color: red; } }- 为防止混乱媒体查询按照从小到大或从大到小的顺序来写，一般建议从小到大来写，这样代码更加简洁
媒体查询+rem
- rem单位是跟着<html>来走的，有了rem页面元素可以设置不同大小尺寸
- 媒体查询可以根据不同设备宽度来修改样式
- 媒体查询+rem可以实现不同设备宽度，实现页面元素大小的动态变化
- 引入资源
- 当样式比较繁多的时候，针对不同的媒体使用不同stylesheets（样式表）
- 原理就是直接在<link>中判断设备的尺寸，然后引用不同的css文件
/* 语法规范 */ <link rel="stylesheet" href="style.css" media="mediatype and|not|only (media feature)"> /* 示例 */ <link rel="stylesheet" href="style.css" media="screen and (min-width:400px)">
Less
- 简介
- Less(Leaner Style Sheets缩写)是一门css扩展语言，也称为css预处理器
- 在csss的语法基础上，引入了变量，Mixin(混入)，运算以及函数等功能，大大简化了css的编写，并且降低了css的维护成本。
- 中文地址http://lesscss.cn/
- 常见css预处理器：Sass、Less、Stylus
- Less是一门css预处理语言，它扩展了css的动态特性
- 安装
- 1.安装nodejs,https://nodejs.org/en/download/
- 使用cmd命令，"node -v"查看版本
- 使用cmd命令，“npm install -g less”
- 使用cmd命令，"lessc -v"查看版本
- 使用
- Less变量
- 命名规范
-
必须有@为前缀
-
不能包换特殊字符
-
不能以数字开头
-
大小写敏感
@color:pink; body{ color:@color; }
-
- 命名规范
- Less编译
- 使用cmd命令，“lessc style.css > style.css”
- VScode插件 Easy LESS
- Less嵌套
#header{ .logo{ a{ &:hover{} } } }- 如果遇见交集|伪类|伪元素选择器前加&，否则会倍解析为父选择器的后代
- Less运算
-
任何数字、颜色或者变量都可以参与运算。Less提供了加减乘除算术运算
-
对于两个不同单位的值之间的运算，运算结果取第一个值的单位
-
如果两个值之间只有一个值有单位，则运算结果就取该单位
-
运算符中件左右有空格格隔开1px + 5rem
-
变量相除时，需添加括号（375rem / 50px）
@width: 10px +5; div{ border:@width solid red; } div{ width: (@width + 5) * 2; } div{ width:（375rem / 50px）; color:#999 - #333; }
-
- Less变量
rem 适配方案
- 思考
- 适配目标
- 让一些不能等比自适应的元素，达到当设备尺寸发生改变的时候，等比例设配当前设备
- 怎么去达到这个目标
- 使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化元素尺寸也会发生变化，从而达到等比缩放的适配
- 适配目标
- rem实际开发适配方案
- 按照设计稿与设备宽度的比例，动态计算并设置html根标签的font-size大小；（媒体查询）
- css中，设计稿元素的宽、高、相对位置等取值，按照同等比例换算为rem为单位的值
- rem适配方案技术使用（市场主流）
- less+媒体查询+rem
- 动态设置htm标签font-size大小
//假设设计稿是750px //假设我们吧整个屏幕划分为15等份（划分标准不一，可以是20或10） //每一份作为html字体大小，这里就是50px @no: 15; //定义份数 html{ font-size: 50px; //默认，因为pc端也可打开 } //320px @media screen and (min-width: 320px){ html { font-size: (320px / @no); } } // 360px @media screen and (min-width: 360px) { html { font-size: (360px / @no); } } // 375px,Iphone 678 的开发尺寸 @media screen and (min-width: 375px) { html { font-size: (375px / @no); } } // 384px @media screen and (min-width: 384px) { html { font-size: (384px / @no); } } // 400px @media screen and (min-width: 400px) { html { font-size: (400px / @no); } } // 414px @media screen and (min-width: 414px) { html { font-size: (414px / @no); } } // 424px @media screen and (min-width: 424px) { html { font-size: (424px / @no); } } // 480px @media screen and (min-width: 480px) { html { font-size: (480px / @no); } } // 540px @media screen and (min-width: 540px) { html { font-size: (540px / @no); } } // 720px @media screen and (min-width: 720px) { html { font-size: (720px / @no); } } // 750px @media screen and (min-width: 750px) { html { font-size: (750px / @no); } } - 元素大小取值方法
-
页面元素的rem值=页面元素值（px）/ (屏幕宽度/划分的份数)
-
屏幕宽度/划分的份数 就是html font-size的大小
-
或者 页面元素的rem值=页面元素值（px）/ html font-size的大小
@import "common"; // 导入公共的 common.less 文件 @baseFont: 50px; body{ min-width: 320px; width: 750rem / @baseFont; line-height: 1.5; font-family: Arial,Helvetica,STHeiTi,sans-serif; background: #f2f2f2; }
-
- 动态设置htm标签font-size大小
- flexible.js+rem (更简单)
- 手机淘宝团队出的简洁高效 移动端适配库
- 原理是把当前设备划分为10等份，但是不同设备下，比例还是一致的
- 需要做的就是确定好我们当前设备的html文字大小就可以了，比如当前的设计稿是750px，那么我们只需要把html字体大小设置为75px（750px / 10）就可以了
- 页面元素rem值：页面元素的px值 / 75
- github地址 https://github.com/amfe/lib-flexible
- VScode插件 cssrem 可以直接px 转换 rem（但是要设置cssrem 中的基准值） cssrem.rootFontSize:75
- less+媒体查询+rem
响应式布局
- 原理：就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而设配不同设备的目的。媒体查询+bootstrap
- Bootstrap
- 来自Twitter(推特)
- 中文官网 https://www.bootcss.com/
- 官网 http://getbootstrap.com/
- 版本一般选择3.x.x 目前使用最多，放弃了IE6-7,对IE8支持但是界面效果不好，偏向用于开发响应式布局、移动端设备优先的WEB项目
<!--要求当前网页使用IE浏览器最高版本的内核来渲染-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--视口的设置：视口的宽度和设备一致，默认的缩放比例和PC端一致，用户不能自行缩放-->
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0">
<!--[if lt IE 9]>
<!--解决ie9以下浏览器对html5新增标签的不识别，并导致css不起作用的问题-->
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<!--解决ie9以下浏览器对css3 Media Query的不识别-->
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
- 书写内容
- 直接拿BootStrap 预先定义好的样式来使用
- 修改BootStrap 原来的样式，注意权重问题
- 学好BootStrap 的关键在于知道它定义了哪些样式，以及这些样式能实现什么样的效果
- 布局容器
- .container类：响应式布局的容器 固定宽度
- .container-fluid类：流式布局容器 百分百宽度
- 栅格系统
- 按照不同屏幕划分为1~12等份
- 行（.row）可以去除父容器作用15px的边距
- 列 .col-xs-* 超小 .col-sm-* 小 .col-md-* 中等 .col-lg-* 大
- 每一列默认有左右15像素的padding
- 列偏移 .col-md-offset-* 向右偏移
- 列排序 .col-md-push-* 往右推 .col-md-pull-* 往左拉
- 响应式工具
- .hidden-xs 隐藏当前屏（现在是超小屏）；
- .visiblie-xs 显示当前屏（现在是超小屏）；
-----------------------拓展--------------------------
二倍精灵图做法
- 把精灵图比例缩放为原来的一般
- 根据新的大小测量坐标
- 注意代码里background-size 也要写为精灵图原来宽度的一半
图片格式
| DPG图片压缩技术 | webp图片格式 |
|---|---|
| 京东自主研发，可直接节省用户近50%的浏览流量，极大的提升了用户的网页打开速度。能兼容jpeg，实现全平台、全部浏览器的兼容支持，与webp的清晰度对比没有差距 | 谷歌开发，加快图片加载速度的图片格式，压缩体积大约只有JPEG的2/3,并能节省大量的服务器宽带资源和数据空间 |