<!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. android studio 开发环境的搭建

    步骤如下: 下载安装配置JDK(注意配置环境变量JAVA_HOME Path CLASSPATH) 从官网下载Android Studio(可以下载带有SDK版本的) 安装Android Studio ...

  2. 关于CDH集群spark的三种安装方式简述

    一.spark的命令行模式 1.第一种进入方式:执行 pyspark进入,执行exit()退出 注意报错信息:java.lang.IllegalArgumentException: Required ...

  3. Spring 梳理-运行时动态注入bean

    动态注入的方法 使用占位符 使用Spring表达式

  4. thymeleaf 设置display样式

    使用th:style标签: th:style="'display:' + @{(${value} ? 'none' : 'inline-block')} + ''" 其中value ...

  5. Angular 自定义管道

    管道的作用就是将原始值进行转化处理,转换为所需要的值: 1. 新建sex-reform.pipe.ts文件 ng g pipe sex-reform 2. 编辑sex-reform.pipe.ts文件 ...

  6. linux 装composer的出现的问题

    curl -sS https://getcomposer.org/installer | php php 值得是php的liux下的安装目录 php环境变量 当装compser 的时候,出现      ...

  7. 【Java】登录验证码

    Html: <input id="verifyCode" name="verifyCode" type="text" value=&q ...

  8. 斐波那契数列n项的值。（递归和非递归算法Golang实现）

    递归实现: func f(num int) int { if num == 1 || num == 2 { return 1 } return f(num-1) + f(num-2) } 非递归实现: ...

  9. RocketMQ消息队列部署与可视化界面安装

    MQ安装部署 最新版本下载:http://rocketmq.apache.org/release_notes 修改配置 vi conf/broker.conf 添加brokerIP1 brokerIP ...

  10. 初探内核之《Linux内核设计与实现》笔记上

    内核简介  本篇简单介绍内核相关的基本概念. 主要内容: 单内核和微内核 内核版本号 1. 单内核和微内核   原理 优势 劣势 单内核 整个内核都在一个大内核地址空间上运行. 1. 简单.2. 高效 ...