1、安装Ruby

2、安装sass

3、webstorm配置file watcher

4、移动端自适应

1、安装Ruby

  安装Ruby,有多种方式,打开官网下载

因为,使用的是window选择RubyInstall,下载地址

RubyInstall下载地址

选择对应系统的版本,下载完成,安装

添加到path,建议勾上,安装完成后,打开开始面板,会有一个Start Command Prompt with Ruby,命令行工具。

2、安装sass

  个人偏好sass,也可以选择less或stylus,打开上一步安装的Ruby命令行

输入gem list 看一下安装了那些包,接着gem install sass

3、webstorm配置file watcher

  打开webstorm,File -> settings -> Tools -> File Watchers

选择+号,新建scss

在输出参数位置,一般会加上--style *;展开格式nestedexpandedcompactcompressed,最传统的选择--style expanded,括号上下换行

工作文件夹和输出位置,可以根据项目来选择,放在同级目录,或者父级,点击insert macros

常见的有文件路径,父文件路径等等,可以自己尝试下,加深理解

4、移动端自适应

  最后,来个实战,基于单页面,做到了大多数手机屏幕很好的适应,包括DPI为2 和 DPI为3的都可以适应

选择淘宝的开源库lib-flexible,参考airen大神写的文章

因为内容较少,只是宣传页面,所以没有选择vue这类框架

直接HTML走起,因为使用了淘宝开源库,就不需要常用的

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

直接在head下引入阿里云的cdn

<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>

搭配sass的mixin效果很棒

 @mixin font-dpr($font-size) {
font-size: $font-size; [data-dpr="2"] & {
font-size: $font-size * 2;
} [data-dpr="3"] & {
font-size: $font-size * 3;
}
} $baseFontSize: 75;
$FontSize: 16;
@mixin px2rem($name, $px1){
#{$name}: ($px1 / $baseFontSize) * 1rem;
} @mixin bg-image($url) {
background-image: url($url + "@2x.png");
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
background-image: url($url + "@3x.png");
}
}

对于font-size,需要使用px, 因为rem会导致,出现15.55px奇葩尺寸,中文点阵一般常用是12、14、16px

bg-image是用来自动识别DPI然后添加@2x或@3x后缀

@include px2rem(padding, 25);  // 生成
padding: 0.33333rem; @include bg-image('bubble'); // 生成
.wrapper .bubble {
background-image: url("bubble@2x.png");
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
.wrapper .bubble {
background-image: url("bubble@3x.png");
}
} @include font-dpr(18px); // 生成
.content {
font-size: 18px;
}
[data-dpr="2"] .content {
font-size: 36px;
}
[data-dpr="3"] .content {
font-size: 54px;
}

其中data-dpr是屏幕的DPI,详细代码查看GitHub

webstorm下的sass自动编译和移动端自适应实践的更多相关文章

  1. webstorm 设置 sass自动编译问题

    sass语法.使用它带来的好处,就不再这里做介绍了,主要看怎么在webstorm里配置自动编译. sass编译是需要Ruby环境的,可以到这里去下载  :  https://rubyinstaller ...

  2. webstorm下设置sass

    关于sass,就不想多说什么了.只要你有css基础,十分钟入门好吗.可以参考下资料:http://www.w3cplus.com/sassguide/ 今天想说的是webStorm下如何实现sass自 ...

  3. Intellij Idea下tomcat设置自动编译

    *eclipse默认tomcat下是自动完成编译:而Intellij Idea默认tomcat下不是自动完成编译,从如下开始设置: 进入"settings",如下图找到" ...

  4. WebStorm怎么设置实现自动编译less文件

    首先,需要保证电脑安装过Node.js,下载地址:https://nodejs.org/en/ 安装Node.js的时候会自动安装npm 然后,安装lessc模块 打开cmd控制台 输入下面一行npm ...

  5. webstorm和intellij idea下如何自动编译sass和scss文件

    webstorm和intellij idea下如何自动编译sass和scss文件 https://segmentfault.com/a/1190000008996504 https://www.jia ...

  6. 在webstorm中配置sass的自动编译,并且可以指定编译后的css的目录.

    参考: WebStorm-2018.2-Help-Sass, Less, and SCSS 作者:tobyDing链接:https://www.jianshu.com/p/0fe52f149cab來源 ...

  7. WebStorm 9 自动编译 SCSS 产出 CSS 和 source maps

    1.  上一节我们学习了Windows下搭建Ruby开发环境,也为这一节的学习做了铺垫.因为本节需要在Ruby环境下安装SASS.详细请见:http://www.cnblogs.com/wind128 ...

  8. 项目中使用sass,如何实现自动编译

    本次React项目中用到了Sass,在一个主文件main.scss中引入了其余的scss文件,然后把main.scss文件编译为main.css文件,最后在项目的主文件入口index.html中引入m ...

  9. WebStorm 9 自动编译 LESS 产出 CSS 和 source maps

    1.双击桌面Chrome图标,打开Chrome,按键盘“F12”键,打开开发工具界面,点击其右上角的“设置”按钮,勾选“Enable JavaScript source maps”  及“Enable ...

随机推荐

  1. nginx 判断访问文件或目录不存在rewrite

    文件及目录匹配,其中:* -f和!-f用来判断是否存在文件* -d和!-d用来判断是否存在目录* -e和!-e用来判断是否存在文件或目录* -x和!-x用来判断文件是否可执行样例 : 判断访问的图片是 ...

  2. 解析xml的问题未解决

    工作上需要解析xml,目前的逻辑是:解析xml到对象中,然后对象再插入数据库.但这存在内存溢出的风险. 今天做的另外一件事是将循环用到工作上,暂时还没有测试,是否能保证程序的重启.有待观察 ##### ...

  3. OSG世界坐标转屏幕坐标(转载)

    OSG世界坐标转屏幕坐标 #define M(row,col) m[col * 4 + row] void Transform_Point(double out[4], const double m[ ...

  4. orientationchange

    <!DOCTYPE html> <html> <head> <title>OrientationChange Event Example</tit ...

  5. 使用PHPMailer发送带附件并支持HTML内容的邮件

    PHPMailer是一个封装好的PHP邮件发送类,支持发送HTML内容的电子邮件,以及可以添加附件发送,并不像PHP本身mail()函数需要服务器环境支持,您只需要设置邮件服务器以相关信息就能实现邮件 ...

  6. linux iptables 配置

    1.查看已有配置 iptables -L -n 2.清除原有规则. iptables -F        清除预设表filter中的所有规则链的规则 iptables -X        清除预设表f ...

  7. iOS 登陆之界面设置

    1.界面构成 1.1. 效果图 1.2. 元素 背景图 用户名的输入框 密码的输入框 登陆按钮 忘记密码 用户注册 第三方登陆 两个分割线

  8. win7下安装sdks

    原文及更多内容:http://yysource.sourceforge.net/?p=103 下载和安装 Windows 调试工具 http://msdn.microsoft.com/zh-CN/wi ...

  9. 编写Node.js原生扩展

    Node.js是一个强大的平台,理想状态下一切都都可以用javascript写成.然而,你可能还会用到许多遗留的库和系统,这样的话使用c++编写Node.JS扩展会是一个不错的注意. 以下所有例子的源 ...

  10. Linux 菜鸟学习笔记--系统分区

    硬盘分区 常识 主分区:最多只能有4个 扩展分区:用于突破主分区最多4个的限制 *最多只能有1个 *主分区+扩展分区最多有4个 *不能写入数据,只能包含逻辑分区 逻辑分区 格式化:实际是写入文件系统, ...