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月份提出的一个 ...
随机推荐
- Session&&cookie
1.session存在于服务器而cookie存在于客户端: 2.持续时间均为20分钟: 3.session存放的是一个obgect类型,而cookie是string类型: 4.session赋值:Se ...
- 洛谷P1494 小Z的袜子
题意:在[l, r]之中任选两个数,求它们相同的概率. 解: 莫队入门. 概率这个很好搞,就是cnt * (cnt - 1) / 2. 然后发现每次挪指针的时候,某一个cnt会+1或-1.这时候差值就 ...
- [luogu4626][一道水题2]
题目链接 思路 这个首先想到质因数分解.然后发现只要对于每个质数将ans乘以这个质数在从1到n中出现过的最高指数次就行了. 这个\(10^8\)令人发指.一直tle,最后发现吸口氧才能过.. 代码 # ...
- echarts 调整图表大小的方法
第一次使用Echarts,大小用的不是那么随心应手,通过文档和百度出的结果,发现其实很简单: 内部图表大小是与div容器大小相关的,如果想调整图表大小,调整div就可以了 如果是想调整图表与div间上 ...
- maven pom添加本地jar,不提交私库
<dependency> <groupId>taobao-sdk</groupId> <artifactId>taobaosdk</artifac ...
- 利用开源审计插件对mysql进行审计
转载于互联网 2017年06月02日MySQL社区版本最新版为MySQL_5.7.18,但是该版本不带AUDIT功能(MySQL Enterprise Edition自带AUDIT功能),因此需要加载 ...
- plsql无法正常显示汉字
首先执行语句 select * from V$NLS_PARAMETERS 查看第一行中PARAMETER项中为NLS_LANGUAGE 对应的VALUE项中是否为SIMPLIFIED CHINES ...
- qml: 以鼠标为中心进行放缩;
import QtQuick 2.9 import QtQuick.Window 2.2 import QtQuick.Controls 2.2 Window { visible: true widt ...
- 10款 Mac 系统优化清理工具软件推荐和下载
本文内容及图片来源[风云社区 SCOEE] 在Windows上有各种安全卫士.系统助手等系统优化和清理工具,比如360安全卫士.腾讯安全管家等,同样MacOS系统也有很多好用的系统优化清理工具,体验比 ...
- Win7无法安装程序提示Installer integrity check has failed的解决方法
最近小明在Win7系统中下载了一款软件,但是在下载的时候弹出了NSIS Error:Installer integrity check has failed.Common causer include ...