<script>
document.documentElement.style.fontSize=document.documentElement.clientWidth*100/750+"px";
window.addEventListener("resize",function(){
document.documentElement.style.fontSize=document.documentElement.clientWidth*100/750+"px";
},false)
</script> <script>
//因绝对定位+margin百分比定位在UC中有BUG,翻屏页面建议使用rem单位
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (clientWidth < 375) {
docEl.style.fontSize = 50 + 'px'
} else if (clientWidth > 750) {
docEl.style.fontSize = 100 + 'px'
} else {
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
}
};
recalc();
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
})(document, window);
</script>

rem手机端适配的更多相关文章

  1. 关于手机端适配的问题(rem,页面缩放)

    关于手机端适配的问题(rem,页面缩放) 96 进击的小前端 关注 2018.02.02 13:57 字数 320 阅读 19评论 0喜欢 0 相信很多和会和我碰到一样的情况,就是你用rem去写移动端 ...

  2. rem手机端页面自适应完美解决方案(最新)

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. h5 手机端适配问题汇总

    1.uc手机浏览器竟然没有 sessionstorage 醉了 2.opera 浏览器  能识别 a标签中href的  javascript:; 为网址  ,  55555 3.safari 的弹框如 ...

  4. 手机端适配rem代码片段

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 手机端适配方案 媒体查询和flexbale

    方法一 flexible 一.npm 包安装 lib-flexible 淘宝适配方案 px2rem px自动转rem npm install lib-flexible --save npm insta ...

  6. 移动端适配,h5网页,手机端适配兼容方案.可以显示真实的1px边框和12px字体大小,dpr浅析

    以前写移动端都是用这段JS解决. (function (doc, win) { // 分辨率Resolution适配 var docEl = doc.documentElement, resizeEv ...

  7. 手机端适配iPhoneX

    iPhoneX取消了物理按键,改成底部小黑条,这一改动导致网页出现比较尴尬的屏幕适配问题.对于网页而言,顶部(刘海部位)的适配问题浏览器已经做了处理,所以我们只需要关注底部与小黑条的适配问题即可(即常 ...

  8. rem手机端页面自适应布局(待修正下一篇完美布局)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 手机端使用rem适配

    最近一直在做手机端的东西,各种型号的手机适配很是无解.经过同事及百度找到了这么一个方法 html font-size默认100px 将rem进行换算1px==0.01rem; 页面在各个手机适配个别会 ...

随机推荐

  1. leetcode 最后一个单词的长度

    给定一个仅包含大小写字母和空格 ' ' 的字符串,返回其最后一个单词的长度. 如果不存在最后一个单词,请返回 0 . 说明:一个单词是指由字母组成,但不包含任何空格的字符串. 示例: 输入: &quo ...

  2. Python 基础入门

    最近业余时间看看Python,从网上找找一些语法看看 http://www.runoob.com/python/python-tutorial.html IDE工具:https://www.pytho ...

  3. 导出excle错误

    导出excel时出现下面的错误: 类型“GridView”的控件“SimpleForm1_ContentPanel2_GVD_List”必须放在具有 runat=server 的窗体标记内. 可以在对 ...

  4. arya-sites模块的主要类

      Site类,生成路由,    - 方法:url,get_urls, register, login,logout   - 字段:_registry = {}    Config,基础配置类,主要用 ...

  5. 使用Navicat 创建mysql存储过程,实现日期加流水号序列

    目的:使用Navicat 创建mysql存储过程,实现格式为8位日期(年月日)+5位流水号序列. 步骤: 1.打开Navicat 登录数据库,点击导航栏上的函数,如下图: 2.点击新建函数,选择“过程 ...

  6. webpack快速入门——配置文件:服务和热更新

    1.在终端安装 cnpm i webpack-dev-server --save-dev 2.配置好后执行 webpack-dev-server,这时候会报错 出现错误,只需要在pagejson里配置 ...

  7. iOS---UICollectlionView 的使用

    UICollectlionView继承自UIScrollerview,跟tableview的使用很相似. 下面是UIcollectionView的一些属性和代理方法. #import "Vi ...

  8. vue-cli新建vue项目安装axios后在IE下报错

    使用脚手架新建了一个vue项目,可以在IE9+浏览器运行,但是在添加了axios后,在IE下就报错了 首先是安装axios,在命令行执行: $ npm install axios -s //执行命令, ...

  9. 【poj1850】 Code 数位dp+记忆化搜索

    题目大意:给你一个字符串,问你这个字符串的rank,如果这个字符串不合法,请直接输出0.(一个合法的字符串是对于∀i,有c[i]<c[i+1]) 字符串s的rank的计算方式:以字符串长度作为第 ...

  10. 对Deeplung检测+两样性分类的一个整合

    整体的流程分为以下几步: 读取原始数据(.mhd文件)——> 生成mask ——> 对数据预处理 ——> 执行检测 ——> 对检测结果进行分类 ——>可视化 懒一点,不贴 ...