<!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. [Job] 找工作小结

    有近2个月没有更新博客,主要精力放在了投递会议论文和秋招找工作方面.这里简单总结一下秋招笔试面试的几点建议和感受. 投递的NLP算法工程师岗位,主要参加过面试的公司有腾讯(春招),蚂蚁金服(春招),追 ...

  2. Spring MVC-从零开始-@RequestMapping 注解headers 属性

    package com.jt; import org.springframework.stereotype.Controller; import org.springframework.web.bin ...

  3. Hadoop点滴-HDFS命令行接口

    1.-help[cmd] 显示命令的帮助信息 ./hdfs dfs -help ls1 2.-ls(r) 显示当前目录下的所有文件 -R层层循出文件夹 ./hdfs dfs -ls /log/map ...

  4. mybatis简单入门介绍

    mybatis入门 简介 什么是mybatis? MyBatis 是一款优秀的持久层框架,它支持定制化 SQL.存储过程以及高级映射.MyBatis 避免了几乎所有的 JDBC 代码和手动设置参数以及 ...

  5. 【SQL server初级】数据库性能优化一：数据库自身优化（大数据量）

    数据库优化包含以下三部分,数据库自身的优化,数据库表优化,程序操作优化.此文为第一部分 数据库性能优化一:数据库自身优化 优化①:增加次数据文件,设置文件自动增长(粗略数据分区) 1.1:增加次数据文 ...

  6. HTML学习之轮播图

    这可以说是一种非常简单的实现轮播图的方法了,由于时间仓促所以没写自动轮播部分.简单说一下原理吧,就是把所有图片堆叠在一个盒子里,设置所有图片的透明度为0,这样就把所有图片都隐藏了,第一张图片除外(第一 ...

  7. 洛谷:P3950 部落冲突

    原题地址:https://www.luogu.org/problemnew/show/P3950 题目简述 给定一棵树,每次给定一个操作,有如下两种: 将某条边染黑 2.询问给定的u,v两点间是否有边 ...

  8. Java 学习笔记之 Suspend和Resume

    Suspend和Resume: Suspend和Resume使用方法: 以下例子证明了线程确实被暂停了,而且还可以恢复成运行状态. public class SuspendResumeThread e ...

  9. Linux的命令（待更新）

    本文说明: ①本文格式: 序号.命令 详解,用文字或者代码 举例: ②本文索引: 1.设置IP 2.ps -aux 3.grep 4. | 1.设置IP 如果本地网卡eth0已经启动,就可以用下面的命 ...

  10. 神奇的Java僵尸(defunct)进程问题排查过程

    现象描述 大概1个月多以前 在启动脚本中增加了tail -f 用来启动后追踪日志判断是否启动成功 后发现无法执行shutdown.sh(卡住 利用curl) 然后无奈使用kill -9 但通过ps - ...