一、概述
1、css模块化设计
| 设计原则 |
| 可复用：每一个样式都要最大限度的实现可复用性 |
| 能继承：每个样式尽量可以让其他样式继承 |
| 要完整：样式要完整，不要缺斤少两，让继承样式来补充 |
| 周期性迭代：不可能一步到位，要周期性的补充完善 |
| 考虑规则 |
| 先确定布局 |
| 确定多少个页面，每个页面是什么风格，有多少可重用代码 |
| 每个页面的功能 |
| 业务流程 |
2、css模块设计举例
| 文件举例 |
| reset.scss用来设计不同浏览器兼容css样式 |
| layout.scss用来存放布局样式 |
| element.scss用来存放按钮，组件等样式 |
| global.scss引入element.scss模块，实现复用继承 |
3、JS组件设计
| 设计原则 |
| 高内聚：任何一个组件内容，尽量封装到组件本身，每个组件不依赖于任何其它组件 |
| 低耦合：假如有两个基本相同的组件，我们不能让这两个组件有直接联系，而是要将他俩共有的部分抽象成一个抽象组件，然后共同继承这个抽象组件，实现低耦合 |
| 周期性迭代：和css一样，不可能一步到位，要周期性的补充完善 |
二、编写Sass模块化
@charset "UTF-8";//使用UTF-8编码
@mixin flex($direction:column,$inline:block){
display: if($inline==block,flex,inline-flex);//如果inline不是默认值，采用inline-flex布局
flex-direction: $direction;//定义布局方向，默认为列
flex-wrap: wrap;//让弹性盒元素必要的时候拆行
}
@import "./layout.scss";//引入布局模块
//按钮
@mixin btn($size:14px,$color:#ffffff,$bgcolor:#F04752,$padding:5px,$radius:5px) {
//动态样式
padding: $padding;
background-color: $bgcolor;
border-radius: $radius;
border: 1px solid $bgcolor;
font-size: $size;
color: $color;
//静态样式
text-align: center;
line-height: 1;
display:inline-block;
}
//列表
@mixin list($direction:cloumn) {
@include flex($direction);//引用混合样式，传入布局方向
}
//面板
@mixin panel($bjcolor:#fff,$padding:0,$margin:20px 0,$height:12px,$textPadding:0 32px,$color:#333,$fontSize:32px) {
background-color: $bjcolor;
padding: $padding;
margin: $margin;
>h4{//面板里面的标题
height: $height;//高
line-height: $height;//行高
text-overflow: ellipsis;//如果内容过长设置一个...显示
white-space: nowrap;//不进行换行
overflow: hidden;//超出内容隐藏
text-align: center;//标题居中
color: $color;//颜色
font-size: $fontSize;//字体大小
}
}
三、自适应
1、基本概念
| CSS像素 |
| 虚拟像素，可以理解为“直觉”像素，CSS和JS使用的抽象单位，浏览器内的一切长度都是以CSS像素为单位的，CSS像素的单位是px |
| px它是图像显示的基本单元，既不是一个确定的物理量，也不是一个点或者小方块，而是一个抽象概念 |
| 设备像素（DP） |
真实的物理像素，由显卡提供物理像素点（具体多少看显卡性能，以及其它因素），我们代码中height：1px width:1px |
就相当于一个物理像素点 |
| 顾名思义，显示屏是由一个个物理像素点组成的，通过控制每个像素点的颜色，使屏幕显示出不同的图像，屏幕从工厂出来那天起，它上面的物理像素点就固定不变了，单位pt。 |
| 逻辑像素 |
| 和CSS像素差不多，不是真实的物理像素，而是人为判定的逻辑尺寸 |
设备像素比DPR(device pixels ratio) |
| 设备像素比（dpr 描述的是未缩放状态下，物理像素和CSS像素的初始比例关系 |
| 设备像素比(dpr) 是指在移动开发中1个css像素占用多少设备像素，如2代表1个css像素用2x2个设备像素来绘制。 |
设备像素比(dpr)，公式为1px = (dpr)^2 * 1dp，可以理解为1px由多少个设备像素组成； |
| viewport |
| viewport是非常重要的概念，分为三类 |
| 1、layout viewport 网站原始大小 |
document.documentElement.clientWidth可以获取layout viewport的宽度值 |
| 2、visual viewport 你浏览器的大小 |
window.innerWidth可以获取visual viewport的宽度 |
| 3、ideal viewport 完美适配你设备的尺寸 |
| 此类没有固定的一个宽度，和你设备宽度一致 |
rem和em的区别 |
rem是根据项目根标签确定单位，也就是< html>标签的font-size属性 |
em是根据它父级标签确定单位 |
2、工作原理
当你网页的设计尺寸宽度为320px，dpr=2，那么实际宽度为640
设备尺寸宽度为375像素，dpr=3，那么宽度为1125
那么响应的比例就是1125/640
这样我们就知道现在的设备上宽度应该自适应成什么样子