移动端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. [转] js对象监听实现

    前言 随着前端交互复杂度的提升,各类框架如angular,react,vue等也层出不穷,这些框架一个比较重要的技术点就是数据绑定.数据的监听有较多的实现方案,本文将粗略的描述一番,并对其中一个兼容性 ...

  2. LeetCode高频148错题记录

    3. Max Points on a Line 共线点个数3种解法 思路一:思考如何确定一条直线,两点法,确定斜率后带入一点.有三种情况,1. 两点重合,2. 斜率不存在,3. 正常算,依次以每个点为 ...

  3. Morley's Theorem

    题解: 计算几何基本操作 注意叉积的时候字母写的顺序 代码: #include <bits/stdc++.h> using namespace std; #define rint regi ...

  4. luogu1355 神秘大三角

    题解: 计算几何入门题 按逆时针方向访问三角形的边 然后作叉积判断点是否在边的顺时针方向 叉积和点积都有分配率 但不满足结合律 代码: #include <bits/stdc++.h> u ...

  5. Json常用组件

    Json2.js   开发者:json官网:http://www.json.org/. 适用环境:用于在不支持JSON对象的浏览器(通常是国内使用IE内核的第三方浏览器)下使用.json2.js提供了 ...

  6. Linux图形化监控网络流量:speedometer查看流量

    Speedometer是一个带宽控制台和对数带宽显示的文件下载进度监控,以及一个简单的命令行界面.其目的是测量和显示网络连接或数据存储在文件中的数据率. Speedometer 2.8该版本增加了一个 ...

  7. css3一道闪光

    <style type="text/css"> .overimg{ position: relative; display: block; /* overflow: h ...

  8. php图文合成文字居中(png图片合成)

    header('Content-type:text/html;charset=utf-8'); /** * png图文合成 by wangzhaobo * @param string $pic_pat ...

  9. HDU4466 Triangle 计数 容斥原理

    原文链接https://www.cnblogs.com/zhouzhendong/p/HDU4466.html 题目传送门 - HDU4466 题意 多组数据,每次询问一个数 $n(n\leq 5\t ...

  10. day14,函数的使用方法：生成器表达式，生成器函数

    生成器表达式: #列表推导式 # y = [1,2,3,4,5,6,7,8] # x = [1,4,9,16,25,36,49,64] # x = [] # for i in y: # x.appen ...