<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

        <style type="text/css">

            *{

                margin: 0;

                padding: 0;

                box-sizing: border-box;

            }

            #div1{

                /*7.5rem===100%*/

                width: 5rem;

                height: 1rem;

                background: skyblue;

                font-size: .7rem;

                text-align: center;

            }

        </style>

    </head>

    <body>

        <div id="div1">

            helloworld

        </div>

        <script>

              function xiangying(){

                  var html = document.querySelector('html')

                html.style.fontSize = window.innerWidth/7.5 + 'px'

//                window.onresize = function(e){

//                    console.log(e)

//                    console.log(window)

//                    html.style.fontSize = window.innerWidth/7.5 + 'px'

//                }

                }

              xiangying()

        </script>

    </body>

</html>

rem辅助式响应布局的更多相关文章

  1. 响应式自适应布局代码,rem布局

    响应式自适应布局代码 首先是先设置根字体大小,PC端一般是16px为根字体,移动端会有不同的,根据情况来设置 js部分 document.querySelector('html').style.fon ...

  2. 前端（八）—— 高级布局：文档流、浮动布局、流式布局、定位布局、flex布局、响应布局

    高级布局:文档流.浮动布局.流式布局.定位布局.flex布局.响应布局 一.文档流 1.什么是文档流 将窗体自上而下分成一行一行,块级元素从上至下.行内元素在每行中从左至右的顺序依次排放元素 2.本质 ...

  3. HTML5入门教程：响应式页面布局

    摘自:https://www.sohu.com/a/225633935_647584 随着互联网时代的发展,我们对网页布局有了新的要求,大气,美观,能够在不同的设备上呈现令人焕然一新的效果.此时,一个 ...

  4. LayoutSimple简易响应式CSS布局框架

    开发这个css布局的目的是为了少做一些重复的工作,一是前端或多或少会开发一些很小的响应式项目, 二是UI设计的出来的界面总是各种布局各种样式,这个时候如果前端去使用Bootstrap或者Foundat ...

  5. [转]CSS3 Media Query实现响应布局

    讲到响应式布局, 相信大家都有一定的了解,响应式布局是今年很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果, 设计师提出了响应式布局的设计方案.今 ...

  6. CSS3——PC以及移动端页面适配方法（响应布局）

    响应布局就是不同宽度应用不同的样式块,每个样式块对应的是该宽度下的布局方式,从而使页面适应不同宽度. <!DOCTYPE html> <html lang="en" ...

  7. ASP.NET MVC通用权限管理系统(响应布局)源码更新介绍

    一.asp.net mvc 通用权限管理系统(响应布局)源码主要以下特点: AngelRM(Asp.net MVC)是基于asp.net(C#)MVC+前端bootstrap+ztree+lodash ...

  8. Openresty的同步输出与流式响应

    Openresty的同步输出与流式响应 默认情况下, ngx.say和ngx.print都是异步输出的,先来看一个例子: location /test { content_by_lua_block { ...

  9. Django的视图流式响应机制

    Django的视图流式响应机制 Django的响应类型:一次性响应和流式响应. 一次性响应,顾名思义,将响应内容一次性反馈给用户.HttpResponse类及子类和JsonResponse类属于一次性 ...

随机推荐

  1. Spring 梳理-bean作用域

    Spring定义了多种域 单例(Singleton):在整个应用中,只有一个实例 原型(Prototype):每次注入或者通过Spring应用上线文获取时,都创建一个bean实例 会话(Session ...

  2. JsonConfig的jsonConfig.setExcludes的用法

    1.问题描述 在项目中经常会有两个类存在一对多或者多对一的关联关系,这样在查询多的一方时,会深入查询关联的一方,而我们可能并不需要去深入查询那些数据,此时使用JsonConfig的jsonConfig ...

  3. .net core 3.0 Signalr - 09 待改进&交流

    ## 个人心得 写博客真的比写代码累,膜拜那些坚持写博客的大佬! 有时候零散的片段比较多,没写之前感觉有千千万万要写的东西,实际写的时候发现, 好像这个没啥说的,然后就帖了个图,或者一笔带过了 ## ...

  4. Flask框架踩坑之ajax跨域请求

    业务场景: 前后端分离需要对接数据接口. 接口测试是在postman做的,今天才开始和前端对接,由于这是我第一次做后端接口开发(第一次嘛,问题比较多)所以在此记录分享我的踩坑之旅,以便能更好的理解,应 ...

  5. 利用基本数据封装类（如：Integer,Float）等实现数据类型转换

    /** * 利用基本数据封装类进行数据类型转换 * @author dyh * */ public class TypeConversion { public static void main(Str ...

  6. Java 学习笔记之 线程interrupt方法

    线程interrupt方法: interrupt方法是用来停止线程的,但是他的使用效果并不像for+break那样,马上就停止循环. 调用interrupt()其实仅仅是在当前线程中打了一个停止标记, ...

  7. FFmpeg(二) 解封装相关函数理解

    一.解封装基本流程 ①av_register_All()////初始化解封装,注册解析和封装的格式. ②avformat_netword_init()//初始化网络,解析rtsp协议 ③avforma ...

  8. 栈二：包含min函数的栈

    /** * 题目:包含min函数的栈 * 描述:  定义栈的数据结构,请在该类型中实现一个能够得到栈最小元素的min函数.  *  注:用data来保存数据,用另一个栈min保存依次入栈最小的数 *  ...

  9. 搭建docker+swoole+php7 的环境

    最近在学习swoole php扩展,苦恼于其运行环境不能在win系统下运行, 但开发代码一直在win系统上,很无奈,,,, 所以就用docker来代替,舒服~ 有很多相关docker的swoole镜像 ...

  10. ssm配置文件

    mybatis配置文件SqlMapConfig.xml <?xml version="1.0" encoding="UTF-8"?> <!DO ...