一、概述
1、css模块化设计
设计原则 |
---|
可复用:每一个样式都要最大限度的实现可复用性 |
能继承:每个样式尽量可以让其他样式继承 |
要完整:样式要完整,不要缺斤少两,让继承样式来补充 |
周期性迭代:不可能一步到位,要周期性的补充完善 |
考虑规则 |
---|
先确定布局 |
确定多少个页面,每个页面是什么风格,有多少可重用代码 |
每个页面的功能 |
业务流程 |
2、css模块设计举例
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/e931f851dd35f7bd3e7a0934acaff174.png)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/176ef4c4a5639643f62caf348d56d401.png)
文件举例 |
---|
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;//让弹性盒元素必要的时候拆行
}
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/389375dabe3cd14865ba0c90a1829df3.png)
@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;//字体大小
}
}
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/768f6d4f5dc8e8fe3e4f75464dcac142.png)
三、自适应
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
这样我们就知道现在的设备上宽度应该自适应成什么样子