<html>

<head>

<meta charset="utf-8">

<script>

  console.log(window.devicePixelRatio);

  var iScale = 1;

  iScale = iScale/window.devicePixelRatio;

  document.write('<meta name="viewport" content="width=device-width,user-scable=no,initial-scale=' + iScale + ',minimum-scale=' + iScale + ',maximum-scale=' + iScale + '"/>');

  //console.log(document.documentElement.clientWidth);

  var iWidth = document.documentElement.clientWidth/16;

  document.getElementsByTagName('html')[0].style.fontSize = iWidth + 'px';

</script>

</head>

</html>

使用js rem动态改变字体大小,自适应的更多相关文章

  1. rem布局和使用js rem动态改变字体大小,自适应

    解决rem文字动态改变字体大小: <script> console.log(window.devicePixelRatio); var iScale = 1; iScale = iScal ...

  2. 响应式网页:用em,rem设置网页字体大小自适应

    「rem」是指根元素(root element,html)的字体大小,好开心的是,从遥远的 IE6 到版本帝 Chrome 他们都约好了,根元素默认的 font-size 都是 16px.这样一个新的 ...

  3. 改变字体大小实现自适应之js方案A

    一.元素大小有两种写法 1.写结果:设计师给的移动端页面sketch设计稿一般是750px宽度,在sublime编辑器里,设置cssrem或rem-unit插件为56px的字体大小.做页面时,设计稿是 ...

  4. javascript实现一行文字随不同设备自适应改变字体大小至字数完全展示

    产品提了一个小需求,希望一行能展示用户输入的所有文字,因为最多限制为25字符,但是如果夹杂英文/韩文/日文等,即使字符数是一样的,但是展示的长度不一样,则有些title标题会被截断. 效果如图 前提是 ...

  5. pycharm设置用滑轮改变字体大小

    在电脑第一次安装pycharm之后,发现每次调整代码界面的字体,总是需要到setting里面调整,这样非常不方便,特别是对于代码量很多的时候,我们有时候需要把目光聚焦到某一句代码,这个时候就需要放大, ...

  6. [转]响应式网页设计:rem、em设置网页字体大小自适应

    本文转自:http://www.cnblogs.com/aimyfly/archive/2013/07/19/3200742.html 「rem」是指根元素(root element,html)的字体 ...

  7. 响应式网页设计:rem、em设置网页字体大小自适应

    「rem」是指根元素(root element,html)的字体大小,好开心的是,从遥远的 IE6 到版本帝 Chrome 他们都约好了,根元素默认的 font-size 都是 16px.这样一个新的 ...

  8. js控制手机端字体大小rem

    //得到手机屏幕的宽度 let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth; if(ht ...

  9. 字体大小自适应纯css解决方案

    viewpoint css3提供了一些与当前viewpoint相关的元素,vw,vh,vim等. “viewpoint” = window size vw = 1% of viewport width ...

随机推荐

  1. react: typescript jest && enzyme

    Install Jest 1.install jest dependencies jest @types/jest ts-jest -D 2.jest.config.js module.exports ...

  2. springmvc配置数据源方式

    1 阿里巴巴的druid数据源 <!-- 配置数据源 使用的是Druid数据源 -->-<bean destroy-method="close" init-met ...

  3. HTML之前端组成、标签

    详情见:https://www.cnblogs.com/liwenzhou/p/7988087.html https://www.cnblogs.com/zhangguosheng1121/p/109 ...

  4. Python操作三大主流数据库

    Python 标准数据库接口为 Python DB-API,Python DB-API为开发人员提供了数据库应用编程接口. Python 数据库接口支持非常多的数据库,你可以选择适合你项目的数据库:  ...

  5. deepin下深度终端使用ssh-agent(xshell中的xagent功能)

    背景:从windows10换到deepin后,在连接公司的服务器遇到了问题:windows下用的是xshell,开启xagent后,可直接从公司的跳转板上连接生产服务器:在deepin的深度终端上,从 ...

  6. jquery选择时分插件

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

  7. Mac安装Nginx、Mysql、PHP、Redis

    安装xcode命令行工具的命令 xcode-select --install   安装homebrew: ruby -e "$(curl -fsSL https://raw.githubus ...

  8. Python 输出 log 到文件的方法

    import loggingfrom logging.handlers import RotatingFileHandler module_name = "test_module" ...

  9. java 8 stream中的Spliterator简介

    目录 简介 tryAdvance trySplit estimateSize characteristics 举个例子 总结 java 8 stream中的Spliterator简介 简介 Split ...

  10. 【React踩坑记六】create-react-app创建的react项目通过iP地址访问(实现局域网内访问)

    同项目组的小伙伴想用自己的电脑访问我电脑上开发阶段的create-react-app创建的react项目. 试过了了各种内网穿透工具ngrok以及localtunnel等. 奈何打开效率实在太过于龟速 ...