PC响应式规范说明

响应式前端10条必须遵循的原则：

1、列表用ul li 

2、不要定义行内样式

3、字体要和参考站一致

4、class名用双引号

5、模块和布局分开

6、PC响应式尽量不用flex，如果用仅仅用于居中对齐，不要用于布局

7、不要使用 > 选择器

8、考虑兼容ie 9以上

9、英文字体默认用 Aria

10、1000-1920分辨率考虑使用 vw/rem 缩放，具体根据项目情况而定

写一个好的页面必须遵循以下几个原则

1、模块和命名要规范

2、布局和模块要独立

3、遵循顺序三原则

名词解释

布局

用于划分结构

一般情况下布局的样式，仅仅只有宽度和浮动

如

.col-l{width:300px; float:left;}
.col-r{width:300px; float:right;}

布局命名

页面内容宽度：.wp

分屏，横向： .row-

分栏，纵向：.col-

不同屏，不同布局，加上分屏名

第一屏，两栏
.row-a1 .col-l{width:300px; float:left;}
.row-a1 .col-r{width:300px; float:right;}

第二屏，两栏
.row-a2 .col-l{width:200px; float:left;}
.row-a2 .col-r{width:400px; float:right;}

模块

放在结构里面的内容和样式

模块有自己的名字定义自己的样式

禁止用布局名字定义模块名

命名规范

自定义名必须加上以下前缀，模块命名种必须带有“-”

列表类加前缀：.ul- 或 .list-

其他模块： .m- 

公用样式： .g-

class命名规范视频教程：https://www.ixigua.com/i7045255285451325964/

class命名脑图手册：https://www.mubucm.com/doc/7yN2GQK-PC

遵循以下几个原则

1. 模块和布局样式要独立

2. 不要用布局的名字定义模块的样式

3. 定义一个模块的样式，直接用模块名开始

定义实例

定义模块样式，直接用模块名开始

// 正确

.ul-news li {}


// 错误 （下面写法都是错的，禁止用布局名定义模块样式）

.col-l .ul-news li {}

.col-l li {}

.wp .ul-news li {}

两个模块有点一样怎么办

html

// 模块1 的命名
<ul class="ul-news">

// 模块2 的命名  继承 模块1的样式

<ul class="ul-news ul-news-a1">

css

// 模块1
.ul-news li {}


// 模块2 样式 （只需写不同的样式）

.ul-news-a1 li {}