Stylus 与响应式

这一章内容不多。正如前文所说,设计同事会把切好的页面交给我,里面大部分样式都写好了,我要做的只是根据需要变动一下。

会写这一章主要是看到还有同学在挣扎着使用 Less 和 Sass,前者语法较弱,后者需要依赖 Ruby,而 Ruby 对于墙内的同学来说,需要解决各种换源的问题——虽然 Sass 语法比 Less 强一些,不过也只是强一些而已,还是不如 Stylus。

Stylus 是基于 Node.js 开发的预处理语言,功能更强,使用也更方便。要在项目中配合 Webpack 使用,只需要配置合适的 loader 就可以了(关于串连 loader,可以看前面的 Webpack 介绍):

module.exports = {
  module: {
    rules: [
      {
        test: /\.styl$/,
        use: [
          'style-loader',
          'css-loader',
          'stylus-loader'
        ]
      }
    ]
  }
}

Stylus 的优势在于:

  1. 语法最简单,; : {} 都可以不要
  2. 表达式支持全面
  3. 可以方便的和其它 JS 库集成

Stylus 其实不需要怎么学习,你可以把它当成一大堆 CSS 语法糖,直接用就行了。不过如果你真想多了解一些的话,不妨看下我在友台做的一次分享:前端必备技能:CSS 预处理工具 Stylus 详解,里面有一些技巧和展示。

响应式

响应式也是很多同学会问到的问题。其实我觉得响应式非常简单,只是“响应式”这个名字实在太不常见了,听起来好像包含着某种特殊的、高深的含义,其实大部分时候我们只是使用 @media 进行媒体查询,根据不同的设备不同的参数呈现不一样的布局而已。

我并不是说“响应式设计(Responsive Design)”没什么技术含量,对页面和组件进行设计,使它们在不同设备不同分辨率下都能提供最好的用户体验,这是非常重要非常有价值也非常有难度的工作。只是在前端实现方面,确实没什么特别多值得一提的难点。

如果你想学习响应式,那么我建议你先看一下这个网站:WrapBootstrap,这是个网站卖模板的网站,上面的模板都是基于 Bootstrap 开发的。你可以随便打开一个模板,然后用浏览器的响应式开发工具切换一下分辨率,看看这些卖了成千上万份的模板,针对不同分辨率是如何做适配的。

简单帮大家总结一下,常见的响应式适配主要针对:

  1. 顶部导航:桌面默认展开,移动端自动切换到汉堡式
  2. 侧边栏导航:桌面默认展开,移动端默认收起,右滑或按钮唤出
  3. 两/三列内容:变一列
  4. 4+ 列:通常变成两列
  5. 横向 slide:支持手势切换
  6. 表格:表格在移动端的适配稍微麻烦点,有多种不同方案,大家可以根据需要选择。

本项目介绍

本次项目中,设计同事也选择了 Bootstrap 4.3.1 作为基础框架,在上面开发了静态网站。我拿到之后,就沿用了大部分样式,直接使用 Stylus 的 @import

@import './screen.css';

// 我的其它样式

我习惯把样式拆分成若干个小模块,在主样式 screen.styl 里引用,这样,可以比较方便的在不同项目中共享代码,将来想提取组件的话,也比较方便。我的常用结构是这样的:

styl # 根目录
├── core
│   ├── body.styl     # html,body 的样式
│   ├── global.styl   # 全局有效的样式
│   ├── layout.styl   # 布局相关样式
│   └── variable.styl # 配色、间距等
├── component         # 组件样式
│   ├── button.styl
│   ├── modal.styl
│   ├── navbar.styl
│   └── ....
├── adapter           # 调整其它组件的样式
│   ├── bootstrap.styl
│   ├── swiper.styl
│   ├── media-element.styl
│   └── ....
├── framework         # 以首页为主的框架样式
│   ├── header.styl
│   ├── footer.styl
│   ├── banner.styl
│   └── ....
├── lang              # 特定语言专属页面的样式
│   ├── cn.styl
│   ├── en.styl
│   └── ....
├── pages             # 各页面的样式
│   ├── about.styl
│   ├── contact.styl
│   └── ....
├── ....
└── screen.styl

results matching ""

    No results matching ""