JS设计移动端页面时会遇到自适应问题,大多数都知道用rem来设置页面的比例大小,下面就来说几种常见的html中的fontsize设置方法:

1.使用flexible.js插件库。  淘宝就是利用这个来设置的。重点说下第二种方法;

2.以下是比较简介的方法:

 $(function(){
initpage();
$(window).resize(function()
{
initpage();
}) function initpage()
{
var view_width = document.getElementsByTagName('html')[0].getBoundingClientRect().width;
var _html = document.getElementsByTagName('html')[0];
view_width>640?_html.style.fontSize=640/16 +'px':_html.style.fontSize =view_width/16+'px';
}
});

js移动端自适应动态设置html的fontsize的更多相关文章

  1. 有了这套flexible.js 移动端自适应方案,你就能在移动端的来去自如, (*^__^*)

    flexible.js 移动端自适应方案 一,flexible.js 的使用方式: github地址:https://github.com/amfe/lib-flexible 官方文档地址:https ...

  2. flexible.js 移动端自适应方案

    一,flexible.js 的使用方式: github地址:https://github.com/amfe/lib-flexible 官方文档地址:https://github.com/amfe/ar ...

  3. 【JS 移动端】获取设置页面大小

    获取设置页面大小 function getMobileData() { var ismobile = false; browser = { versions: function () { var u ...

  4. 动态设置html的font-size值

    PC端 (function () { function setRootFontSize() { let rem, rootWidth; let rootHtml = document.document ...

  5. 动态设置bootstrapswitch状态

    checkbox的html <input type="checkbox" name="mySwitch" id="mySwitch"& ...

  6. <video>标签:视频播放器动态设置src

    HTML代码 <div  id="my_div">    <video id="my_video"  width="600" ...

  7. js动态设置根元素的rem方案

    方案需求: rem 单位在做移动端的h5开发的时候是最经常使用的单位.为解决自适应的问题,我们需要动态的给文档的根节点添加font-size 值. 使用mediaquery 可以解决这个问题,但是每一 ...

  8. Dynamic CRM 2013学习笔记(二十八)用JS动态设置字段的change事件、必填、禁用以及可见

    我们知道通过界面设置字段的change事件,是否是必填,是否可见非常容易.但有时我们需要动态地根据某些条件来设置,这时有需要通过js来动态地控制了. 下面分别介绍如何用js来动态设置.   一.动态设 ...

  9. js动态设置窗体位置

    1设置登录框的js,动态设置高度等 <script> $(document).ready(function () { $() / + "px"); $("in ...

随机推荐

  1. OpenGL 之 Compute Shader(通用计算并行加速)

    平常我们使用的Shader有顶点着色器.几何着色器.片段着色器,这几个都是为光栅化图形渲染服务的,OpenGL 4.3之后新出了一个Compute Shader,用于通用计算并行加速,现在对其进行介绍 ...

  2. Python网络爬虫_Scrapy框架_2.logging模块的使用

    logging模块提供日志服务 在scrapy框架中已经对其进行一些操作所以使用更为简单 在Scrapy框架中使用: 1.在setting.py文件中设置LOG_LEVEL(设置日志等级,只有高于等于 ...

  3. [bzoj3456]城市规划:多项式,分治

    Description 刚刚解决完电力网络的问题, 阿狸又被领导的任务给难住了. 刚才说过, 阿狸的国家有n个城市, 现在国家需要在某些城市对之间建立一些贸易路线, 使得整个国家的任意两个城市都直接或 ...

  4. 一个适合于.NET Core的超轻量级工作流引擎:Workflow-Core

    一.关于Workflow-Core 近期工作上有一个工作流的开发需求,自己基于面向对象和职责链模式捣鼓了一套小框架,后来在github上发现一个轻量级的工作流引擎轮子:Workflow-Core,看完 ...

  5. vue.js 的 vue-element-admin 实践开发

    官方网址: https://panjiachen.github.io/vue-element-admin-site/zh/ 一:面包屑导航,根目录文字修改: 定位到文件 vue-element-sup ...

  6. 01-Vue.js基础

    一.Vue基础 1.介绍 Vue是一套用于构建用户界面的渐进式框架.Vue的核心库只关注视图层,不仅容易上手,还便于与第三方库或既有的项目整合.兼容性:Vue 不支持 IE8 及以下版本,因为 Vue ...

  7. linux命令--基本权限命令

    一.权限介绍 使用ls命令查看时,发现长格式显示的第一列就是文件的权限 权限位一共有 10 位,这 10 位权限位的含义如下图所示. 第 1 位代表文件类型.Linux 不像 Windows 使用扩展 ...

  8. PHP intdiv 数学函数

    定义和用法 intdiv - 对除法结果取整 版本支持 PHP4 PHP5 PHP7 不支持 不支持 支持 语法 intdiv ( int $dividend , int $divisor ) int ...

  9. Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结

    Bootstrap时间日历插件bootstrap-datetimepicker配置与应用小结   by:授客 QQ:1033553122 1.   测试环境 win7 JQuery-3.2.1.min ...

  10. Cobalt Strike系列教程第二章:Beacon详解

    上周更新了Cobalt Strike系列教程第一章:简介与安装,文章发布后,深受大家的喜爱,遂将该系列教程的其他章节与大家分享,提升更多实用技能! 第二章:Beacon详解 一.Beacon命令 大家 ...