rem+js响应式布局的设置
直接调用代码即可,不过不同屏幕宽度要求会不同,相应修改一下就ok了
// rem响应式布局
(function(){
var html=document.querySelector('html')
html.style.fontSize=window.innerWidth/7.5+'px'
window.onresize=function(e){
html.style.fontSize=window.innerWidth/7.5+'px'
}
})() //方式二
document.documentElement.style.fontSize = document.documentElement.clientWidth / 375*100 + 'px';
//方式二方式三
(function(){
var html=document.querySelector('html')
html.style.fontSize=window.innerWidth/375*100+'px'
window.onresize=function(e){
html.style.fontSize=window.innerWidth/375*100+'px'
}
})()
rem+js响应式布局的设置的更多相关文章
- 理解rem实现响应式布局原理及js动态计算rem
前言 移动端布局中,童鞋们会使用到rem作为css单位进行不同手机屏幕大小上的适配.那么来讲讲rem在其中起的作用和如何动态设置rem的值. 1.什么是rem rem是相对于根元素(html标签)的字 ...
- rem字体响应式布局
引用js,自动算字体大小,响应式布局 <script> var iScale = 1; iScale = iScale / window.devicePixelRatio; documen ...
- rem在响应式布局中的应用
rem/em/px/pt的基友关系 px 像素相对长度单位,相对于显示器屏幕分辨率而言 em 相对长度单位,根据其父元素来设置字体大小 pt point,是印刷行业常用单位,等于1/72英寸 rem ...
- JS 响应式布局
1.media 效果为屏幕宽度变化时,背景颜色也变化 <!DOCTYPE html> <html lang="en"> <head> <m ...
- js响应式布局
<!DOCTYPE html> <html class="mobile"> <head> <meta charset="UTF- ...
- CSS3与页面布局学习笔记(四)——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)
一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...
- CSS3移动端vw+rem不依赖JS实现响应式布局
1.前言 (1)vw/vh介绍 在使用之前,我们先简单了解一下什么是vw和rem以及它们的作用,vw是css3出现的一个新单位,它是"view width"缩写,定义为把当前屏幕分 ...
- 移动端响应式布局--你不知道的CSS3.0媒体查询,解决rem部分情况下无法适配的场景
媒体查询作为响应式布局的方法之一,实际项目中用途也很广.但是你真的知道怎么用吗? 例如,下面匹配 iphone6/7/8 屏幕 @media screen and (max-width: 375px) ...
- 网站响应式布局/网站自适应问题+rem、em、px、pt及网站字体大小设配
Bootstrap 网格系统: Bootstrap CSS: Bootstrap 组件及插件: 一.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个 ...
随机推荐
- WebAPI集成SignalR
WebAPI提供通用数据接口,SignalR提供实时消息传输,两者可以根据实际业务需求进行组合. 环境 版本 操作系统 Windows 10 prefessional 编译器 Visual Studi ...
- (转)ZooKeeper的Znode剖析
ZooKeeper的Znode剖析 https://blog.csdn.net/lihao21/article/details/51810395 根据节点的存活时间,可以对节点划分为持久节点和临时节点 ...
- 震撼:多线程下的操作离不开synchronized
昨天在写一个聊天程序,在发送消息的时候是采用单独的一个线程,接收消息是在另一个线程中完成. 我在测试的过程中发现,有的时候当消息比较多时,比如: 当我刚刚发送完一条消息,这个时候要将我发送的消息添加到 ...
- React之Perf
import Perf from 'react-addons-perf' // ES6语法 var Perf = require('react-addons-perf') // ES5语法针对node ...
- P NP NPC
study from : http://www.matrix67.com/blog/archives/105
- Oracle 的常用概念
SQL优化(数据库的优化) 1. 尽量使用列名(不用*) 2. where解析顺序: 右--> 左 3. 自连接不适合操作大表 4. 尽量使用多表查询不使用子查询语句 5. 尽量不要使用集合运算 ...
- Unity Shader基本例子
Unity中,对于一个物体我们想要改变其的外观,就需要给其增加一个材质,即Matiral 一般的Matiral采用的是标准的Shader,而标准的Shader并不是最好的渲染物体表明的效果,那么我们就 ...
- nginx 配置两个域名
1.首先第一步安装: 参考:https://www.cnblogs.com/wyd168/p/6636529.html 启动: /usr/local/nginx/sbin/nginx -c /usr/ ...
- 快速入门Treap(代码实现)
学习数据结构对我来说真的相当困难,网上讲\(Treap\)的我也看不太懂,前前后后花了大概六天才把\(Treap\)学会.为了避免再次忘记,这里我整理一下\(Treap\)的基础知识和模板. 阅读此文 ...
- (DFS)P1605 迷宫 洛谷
题目背景 迷宫 [问题描述] 给定一个N*M方格的迷宫,迷宫里有T处障碍,障碍处不可通过.给定起点坐标和 终点坐标,问: 每个方格最多经过1次,有多少种从起点坐标到终点坐标的方案.在迷宫 中移动有上下 ...