共计 1599 个字符，预计需要花费 4 分钟才能阅读完成。
前沿
目前因各大 UI 框架的推出，前端画页面就如搭积木一样简略，然而一些我的项目比拟小或是其余起因，并不需要加载大体积的 UI 框架，所以还是有须要从 0 开始画页面的需要，接下来分享一下我是如何画页面的
理解设计
咱们画页面其实是实现设计师想法的过程，设计师是对整个页面 UI 逻辑最分明的人，所以咱们须要有设计师的思维能力更好的实现页面。
什么是 Atomic Design 原子设计
原子设计是一种基于网络设计零碎思维形式的规范性准则。咱们就称它为设计零碎的根底领导实践。分为 5 个档次
原子是咱们设计中最为根底元素，能够是一种字体，一个色板，一组图标或者一个矩形。
把几个原子组合形成一个分子，比方黑体字、矩形、16 号字、蓝色、红色、形成一个按钮。
几个分子形成一个组织，咱们也能够称为组件。组件形成页面框架，最初生成页面。
当扭转原子时，整个体系都会产生变动，同时咱们也能够逐级调整，总之你的每次扭转都会影响到这个零碎，然而它又是放弃一致性的。
设计师是如何遵循原子设计的
设计师首先会定义一个这个的原子面板，定义我的项目应用的色彩，字号，间距，暗影，圆角等
而后再依据这个原子去定义组件，再用组件定义模块，模块再组成一个个的页面。
开发应如何遵循原子设计
首先是开发为什么也要遵循原子设计呢？试想一下当某一天领导说感觉整个页面的间距太大了，那设计师能够通过批改原子里的间距，一键就把所有页面相应的间距给批改了。如果咱们没有遵循原子设计去写代码，那咱们得一个个找到相应的间距的中央去批改。
那开发怎么遵循原子设计呢？话不多说，间接上代码
定义原子变量一一对应设计稿里的原子
// variable.css
--brand-primary: #147BD1;
--brand-danger: #D11429;
--brand-success: #6DC41F;
原子化 css
// common.css
.text-primay {color: var(--brand-primary)
}
.text-danger {color: var(--brand-danger)
}
.text-success {color: var(--brand-success)
}如果是用的 scss 或者 less 等动静 css 语言，还能够应用循环生存
// backgrounds
@each $key, $value in $color-status {.bg-#{$key} {background-color: nth($value, 1);
}
}在其余 css 类里应用
.title {color: var(--brand-primary)
}在页面上应用
<p class="text-primary"> 主色文字 </p>剖析设计稿
兼容的浏览器、适配要求
不同的兼容要求，跟适配要求会对你抉择的相干技术有影响，比方 flex 布局 如果在 ie9 下就不兼容
设计稿的一致性
剖析设计稿是否遵循了原子设计及一致性
开发
布局
分为 3 种布局
固定布局: 实用于网页内容不受屏幕大小影响
.container {width: 1200px;}流体布局：实用于网页内容需依据屏幕大小等比缩放
.container {
width: 100%;
// width: 100vw;
}响应式布局: 实用于不同屏幕下，网页内容排版不一样
.container {width: 1200px;}
@media screen and (min-width: 768px) {width: 100%}适配
- 排版须要适配可采纳响应式布局
- 内容须要等比缩放适配的采纳流体布局
响应式布局 + 流体布局 = 栅格零碎
html 标签
- 标签语义化
a. 在没有 CSS 的状况下，页面也能呈现出很好地内容构造
b. 有利于 SEO
c. 更具可读性 -
html 元素周期表
css
蕴含公共款式（重置款式、原子类、可复用模块款式）、页面款式
css 命名
BEM 命名法
不举荐的命名：
通用 class 类名(如:.title,.expand,.tips) 如果肯定要用须要限定作用域，防止款式净化
