移动端web页面适配问题

1.引入插件

github地址:https://github.com/re54k/mobileweb-utilities/blob/master/util/mobile-util.js

2.在sublime中配置文件

安装

  • 克隆项目   https://github.com/hyb628/cssrem.git
  • 进入packages目录:Sublime Text -> Preferences -> Browse Packages...
  • 复制下载的cssrem文件夹到刚才的packges目录里。
  • 重启Sublime Text。
配置参数

参数配置文件:Sublime Text -> Preferences -> Package Settings -> cssrem-->settings user

  1.px_to_rem - px转rem的单位比例,默认为40。

  (按照第一步引入得js文件,打开页面F12下查看html的font-size的值。例如:设计稿为750,就打开iphone6的模式查看html的 font-size:40px;则这个数为40;)

  2.max_rem_fraction_length - px转rem的小数部分的最大长度。默认为6。(最好不大于2位数)

  3.available_file_types - 启用此插件的文件类型。默认为:[".css", ".less", ".sass"]。

淘宝的移动端自适应方案:https://github.com/amfe/lib-flexible

移动端适配问题px->rem方法的更多相关文章

  1. 移动端适配方案(rem+flex)

    为什么用rem不用px? 主流:各大网站的移动版绝大多数都是用的rem.   移动端屏幕分辨率差别太大:最低适配的iPhone6,分辨率仅为750*1334.而现在市面上大多数手机,都达到了1080* ...

  2. 移动端的vw px rem之间换算

    一.vw px rem em是什么 1.vw:就是相对视口宽度(Viewport Width).1vw = 1% * 视口宽度.也就是说,一个视口就是100vw. 2.px:px应该是在css中使用最 ...

  3. 移动端适配方案以及rem和px之间的转换

    背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...

  4. pc端与移动端适配解决方案之rem

    使用方式: 在html页面开头,引入下面的原生js代码 (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'ori ...

  5. Vue开发中的移动端适配(px转换成vw)

    1.项目根目录下,创建 .postcssrc.js 文件. 2.安装插件. -D (开发依赖) postcss-import postcss-url cssnano-preset-advanced - ...

  6. vue-cli 2.x和3.x配置移动端适配px自动转为rem

    移动端适配一直都是个大问题,现在也出现了各种各样的解决方案,比如 rem, vw 百分比等,但是比较成熟的切比较容易编写的还是 rem,他是相对于根元素的 font-size 进行等比例计算的. 但是 ...

  7. Rem实现移动端适配

    移动端适配 web页面跑在手机端(h5页面) 跨平台 基于webview() 基于webkit 常见适配方法 pc端采用display:inline-block,让div盒子横着排 移动web:采用定 ...

  8. 移动端适配 rem

    前置知识: 物理像素(physical pixel,device pixel) 物理像素(设备像素),显示设备中一个最微小的物理部件.每个像素可以根据操作系统设置自己的颜色和亮度. 设备独立像素(de ...

  9. 移动端适配-rem(新)

    概念 对于移动端开发来说,无可避免的就是直面各种设备不同分辨率和不同DPR(设备像素比)的问题,在此忽略其他兼容性问题的探讨. 移动端像素 设备像素(dp),也叫物理像素.指设备能控制显示的最小物理单 ...

  10. 浅谈移动端适配-rem

    对于移动端开发来说,无可避免的就是直面各种设备不同分辨率和不同DPR(设备像素比)的问题,在此忽略其他兼容性问题的探讨. 一. 移动端开发有关于像素的概念: 1.设备像素(dp),也叫物理像素.指设备 ...

随机推荐

  1. EF Core Migration

    //添加migrations dotnet ef migrations add [名称] //根据model更新sql表结构 dotnet ef database update //删除最新的migr ...

  2. POJ 2914 Minimum Cut【最小割 Stoer-Wangner】

    题意:求全局最小割 不能用网络流求最小割,枚举举汇点要O(n),最短增广路最大流算法求最大流是O(n2m)复杂度,在复杂网络中O(m)=O(n2),算法总复杂度就是O(n5):就算你用其他求最大流的算 ...

  3. angular 2+ 变化检测系列一(基础概念)

    什么是变化检测? 变化检测的基本功能就是获取应用程序的内部状态(state),并且是将这种状态对用户界面保持可见.状态可以是javascript中的任何的数据结构,比如对象,数组,(数字,布尔,字符串 ...

  4. JMeter非GUI模式下日志介绍

    Creating summariser <summary> Created the tree successfully using /opt/JMeter/TestPlan/test.jm ...

  5. 使用impala操作kudu之创建kudu表(内部表和外部表)

    依次启动HDFS.mysql.hive.kudu.impala 登录impala的shell控制端: Impala-shell 1:使用该impala-shell命令启动Impala Shell .默 ...

  6. Javascript 中调参数的脚本onclick="select(this)" this 怎么解释

    解释1. this,指当前的onclick所在的节点本身. 比如: <div onclick='select(this)"></div> 则当点击div时,this就 ...

  7. 044 hive与mysql两种数据源之间的join

    这篇文章是基于上一篇文章的续集 一:需求 1.图形表示 二:程序 1.程序. package com.scala.it import java.util.Properties import org.a ...

  8. 用greenlet实现协程消费者生产者

    代码: from greenlet import greenlet import random def pro(): 生产者 while True: item = random.randint(0,9 ...

  9. 最小生成树-QS Network(Prim)

    题目大意: 给出的案例结果得出步骤,如下图所示,从结点1开始查找,找出的一条路径如绿色部分所标注.(关键处在于连接每条路径所需要的适配器的价格得加上去) 代码实现: #include<iostr ...

  10. XML相关的安全漏洞-XXE,XPATH小结

    0x00前言: 本文主要小结以下php下的xpath查询xml结构的漏洞利用和XXE漏洞利用 xml是可扩展标记语言,它被设计出来是为了存储传输数据的. 它的结构是树形结构,并且标签要成对出现比如下面 ...