rem适配移动端
一、屏幕宽度 / 设计稿宽度 *100 来设置根元素的 font-size 10px = 0.10rem
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if(clientWidth>=){
docEl.style.fontSize = '100px';
}else{
docEl.style.fontSize = * (clientWidth / ) + 'px';
}
}; if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
二、
const MAX_FONT_SIZE = ; document.addEventListener('DOMContentLoaded', () => {
const html = document.querySelector('html');
let fontSize = window.innerWidth / ;
fontSize = fontSize > MAX_FONT_SIZE ? MAX_FONT_SIZE : fontSize;
html.style.fontSize = fontSize + 'px';
});
// 以 Iphone 6、6s、7、8 为设计基础。
// 定义预计根元素 fontSize。
$rootFontSize: / ;
// 定义像素转化为 rem 函数
@function px2rem ($px) {
@return $px / $rootFontSize + rem;
}
三、一套视觉稿适配所有移动设备的js框架:pageresponse
GitHub:https://github.com/peunzhang/pageResponse
- 用transform:scale缩放页面,要求视觉稿高清
- 页面以px为单位即可让h5适配各种移动设备,适配原则根据视觉稿比例缩放页面
rem适配移动端的更多相关文章
- Vue将px转化为rem适配移动端
Vue将px转化为rem适配移动端 1.下载lib-flexible我使用的是vue-cli+webpack,所以是通过npm来安装的npm i lib-flexible --save 2.引入lib ...
- 本周汇总 动态rem适配移动端/块状元素居中/透明度
1.动态rem适配移动端 !function(){ var width = document.documentElement.clientWidth; var head=document.getEle ...
- 用rem适配移动端
常见方式: 1. 固定宽度(320)做法:这样前端倒是爽了,可是大页面两边有留白,小页面图标文字又会缩的很小,用户体验极其不好. 2. 流式布局:其实就是用%,这样宽度倒还差不多,高度怎么搞?所以这种 ...
- 移动端使用rem适配及相关问题
移动端适配方案,说多也很多.可以使用百分比布局,但百分比与em都是基于父元素进行计算的,在实际应用中不是很方便.使用rem不仅可以设置字体大小,块大小也可以设置.而且可以良好的适配各种终端,所以这方案 ...
- 谈谈我的移动端rem适配方案
最近有点怀疑人生,毕竟一个人写前端,有时候会怀疑自己理解的一些东西包括用法有没有符合标准.趁着这阵子闲下来,翻了翻别人的rem适配博客,发现有点绕口,怪自己是个强迫症,啥都要自己去试试结果并从中理解, ...
- H5移动端rem适配
/** * 移动端自适应 */ <meta name="viewport" content="width=device-width,user-scalable=no ...
- 移动端最强适配(rem适配之px2rem)&& 移动端结合Vuex实现简单loading加载效果
一.rem之px2rem适配 前言:相信许多小伙伴上手移动端时面对各式各样的适配方案,挑选出一个自己觉得简便.实用.高效的适配方案是件很纠结的事情. 深有体会... 经过多个移动端项目从最初的 vie ...
- 关于移动端rem适配
var num = 1 / window.devicePixelRatio; var fontSize = document.documentElement.clientWidth / 10; doc ...
- Rem实现移动端适配
移动端适配 web页面跑在手机端(h5页面) 跨平台 基于webview() 基于webkit 常见适配方法 pc端采用display:inline-block,让div盒子横着排 移动web:采用定 ...
随机推荐
- vs2008 vc90.pdb 不是创建此预编译头时使用的 pdb 文件,请重新创建预编译头
解决方案: 找到项目中的stdafx.cpp,右键属性,找到C/C++->预编译头, 设置为创建预编译头, 重新生成
- ajax jQ写的上传进度条
XML/HTML Code <form id="myForm" action="upload.php" method="post" e ...
- [PHP] 一个免费、开源的基于tp5+layui2.1.5开发的快速开发框架
推荐 一个免费.开源的基于tp5+layui2.1.5开发的快速开发框架,既可以用来学习,也可以用来实际项目的快速开发: 码云下载:https://gitee.com/eduaskcms/eduask ...
- HBase快照迁移数据失败原因及解决办法
目录 目录 1 1. 背景 1 2. 环境 1 3. 执行语句 1 4. 问题描述 1 5. 错误信息 2 6. 问题原因 3 7. 解决办法 4 1. 背景 机房裁撤,需将源HBase集群的数据迁移 ...
- nginx 动静分离之 tomcat
配置文件示例 server { listen ; server_name www.xxx.com; location ~* "\.(jpg|png|jepg|js|css|xml|bmp|s ...
- 将行数据转换成Java(POJO)对象
工作中经常会遇到将行数据转换成Java(POJO)对象的场景,其中关于字段校验和类型转换的处理繁琐而冗余,对于有代码洁癖的人着实不能忍.这里分享下自己封装的工具代码,也许能够帮助你更简单地完成此类任务 ...
- windows 安装 numpy scipy matplotlib scikit-learn
直接使用 pip install 包名 的方法安装不成功 下载第三方安装包 下载地址:https://www.lfd.uci.edu/~gohlke/pythonlibs/#numpy 根据系统 ...
- Salesforce Lightning开发学习(三)Component表单初解
初步了解了Lightning的组件开发流程后,我们来认识下lightning的表单 点击对象管理器,选择对象:电影(Movie__c),创建字段 标签 API 数据类型 票价 Number__c ...
- Flask项目之login提交
#!/usr/bin/env python # -*- coding: utf-8 -*- # @Time : 2019/11/2 20:53 # @Author : zoulixiang # @Si ...
- elasticsearch 官方监控文档 老版但很有用
https://zhaoyanblog.com/page/1?s=elasticsearch 监控每个节点(jvm部分) 操作系统和进程部分 操作系统和进程部分的含义是很清楚的,这里不会描述的很详细. ...