一、px 自动转换为rem

sublim Text3

  • 进入packages目录(在Sublime安装目录下找文件夹):Sublime Text -> Preferences -> Browse Packages...
  • 复制下载的cssrem目录到刚才的packges目录里。
  • 重启Sublime Text。

二、sublim Text 配置参数
       参数配置文件:Sublime Text -> Preferences -> Package Settings -> cssrem->Settings-User,输入如下代码
     {
  "px_to_rem": 40, //px转rem的单位比例,默认为40
        "max_rem_fraction_length": 6, //px转rem的小数部分的最大长度。默认为6。
    "available_file_types": [".css", ".less", ".sass",".html"]
     //启用此插件的文件类型。默认为:[".css", ".less", ".sass"]
  }

三、下载flexible,并在头部引入
<script src="js/flexible_css.debug.js"></script>
    <script src="js/flexible.debug.js"></script>
四、引入CDN:
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>

移动端rem flexible方案的更多相关文章

  1. 谈谈我的移动端rem适配方案

    最近有点怀疑人生,毕竟一个人写前端,有时候会怀疑自己理解的一些东西包括用法有没有符合标准.趁着这阵子闲下来,翻了翻别人的rem适配博客,发现有点绕口,怪自己是个强迫症,啥都要自己去试试结果并从中理解, ...

  2. H5 端 rem 适配方案与 viewport 适配

    H5 端 rem 适配方案与 viewport 适配 rem rem 是 CSS3 新增的一个相对单位(root em,根 em) 只根据当前页面 HTML 页面的 font-size 设置,如果根目 ...

  3. 移动端REM布局方案

    引用http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html的方案 下载地址https://github.com/hupan50 ...

  4. 移动端rem自适应方案

    一般设计师给我们的设计稿尺寸都为750*1340 .. 网易,淘宝移动端首页上html元素的font-size 目前就先说一下网易的做法 引入下面这段js,用于计算动态的font-size (func ...

  5. vue中使用第三方UI库的移动端rem适配方案

    需求:使用vue-cli脚手架搭建项目,并且使用第三方的UI库(比如vant,mint ui)的时候,因为第三方库用的都是用px单位,无法使用rem适配不同设备的屏幕. 解决办法:使用px2rem-l ...

  6. 第130天:移动端-rem布局

    一.关于布局方案 当拿到设计师给的UI设计图,前端的首要任务就是布局和样式,相信这对于大部分前端工程师来说已经不是什么难题了.移动端的布局相对PC较为简单,关键在于对不同设备的适配.之前介绍了一篇关于 ...

  7. 最佳移动端h5自适应rem适配方案

    一.利用lib-flexible.postcss-plugin-px2rem插件 进行移动端rem适配. 1.第一 引入lib-flexible . 安装lib-flexible: npm i lib ...

  8. 移动端REM布局模板(阿里高清方案)

    移动端REM布局模板(阿里高清方案),蛮好的,转自: http://www.jianshu.com/p/985d26b40199 . <!DOCTYPE html> <html la ...

  9. vue.js移动端配置flexible.js

    前言 最近在用vue做移动端项目,网上找了一些移动端适配的方案,个人觉得手淘团队flexible.js还是比较容易上手,在这里做下总结. 主体 flexible.js适配方案采用rem布局,根据屏幕分 ...

随机推荐

  1. JavaScript&Date对象

    JavaScript Date对象 <script type="text/javascript"> var date = new Date(); document.wr ...

  2. JAVA面试题(8)

    java基础以及多个“比较” 1.Collections.sort排序内部原理 在Java 6中Arrays.sort()和Collections.sort()使用的是MergeSort,而在Java ...

  3. yarn 命令

    使用yarn的优点,简而言之就是:锁定版本,下载之前检查完整性. yarn install //安装依赖 yarn upgrade //更新 yarn upgrade immutable //更新指定 ...

  4. blfs(systemd版本)学习笔记-编译安装配置dhcpcd

    我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! dhcpcd项目地址:http://www.linuxfromscratch.org/blfs/view/stable-syst ...

  5. dpr,ppi,dip,viewport的一些概念

    一 ppi,dpr,dip,分辨率,屏幕尺寸,设备物理像素,设备独立像素 分辨率:1920px*1080px 在这个设备上纵向上有 1920个像素点(色块)... 屏幕尺寸:5英寸(in) = 5*2 ...

  6. Human Motion Analysis with Wearable Inertial Sensors——阅读3

    Human Motion Analysis with Wearable Inertial Sensors——阅读3 四元数方向滤波器 之前的研究开发了一种自适应增益互补滤波器,并结合高斯 - 牛顿优化 ...

  7. IIS下配置跨域设置Access-Control-Allow-Origin

    设置Access-Control-Allow-Origin 打开IIS,找到“HTTP响应标头”点进去, 在右侧可以看到添加,然后添加如下标头即可 Access-Control-Allow-Heade ...

  8. 判断字符串a和b是否互为旋转词

    旋转词:把字符串str的任意部分移动到后面形成的新字符串叫做字符串str的旋转词. 比如abc的旋转词有 abc,acb,cba,... 判断str1和str2是否互为旋转词,其最优解可以是时间复杂度 ...

  9. WebView内存泄露的解决方案

    一.简介: 做Android开发的相信都对webview不会陌生,而且也对系统自带的webview本身存在的问题也是怨念很久了,一方面是本身对js的支持不是很好另外一方面就是经常被人诟病的内存泄露了, ...

  10. 【爬虫】使用xpath与lxml移除特定标签

    移除标签的两种方式 可以用xpath定位 for bad in html.xpath(".//table"): bad.getparent().remove(bad) 参考:htt ...