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月份提出的一个 ...
随机推荐
- react-native中的style
在 React Native 中,你并不需要学习什么特殊的语法来定义样式.我们仍然是使用 JavaScript 来写样式. 所有的核心组件都接受名为style的属性.这些样式名基本上是遵循了 web ...
- PHP选择排序算法
说明: 通过假设一个最小数的key,来逐个比较后面的值,如果假设的值大于后面的值,则互换位置. 示例: <?php $a = array(2,13,42,34,56,23,67,365,8766 ...
- Python之推导式、生成器表达式
l = [i for i in range(10)] print(l) l1 = ['选项%s'%i for i in range(10)] print(l1) 1.把列表解析的[]换成()得到的就是 ...
- linux:提取匹配含有小数点的数字(grep函数)
学艺不精,一开始用了 “grep -ne '46.5743' file.txt” 提取含有46.5743的小数不成功,后面查资料才知道正则表达式中,小数点代表的是:一定有一个任意字节. 正确的写法应该 ...
- unittest的使用二——生成基于html的测试报告
mac下的安装: 1.下载HTMLTestRunner.py文件,下载地址http://tungwaiyip.info/software/HTMLTestRunner.html,可以复制里面的内容到一 ...
- Javascript的组成——EMACScript、DOM、BOM
EMACScript:一种规范,JS必须准守它的约定,JS的核心. DOM:文档对象模型,W3C标准,JS访问HTML文档的接口. BOM:浏览器对象模型,没有统一的标准.JS访问浏览器的接口. EM ...
- POJ 1743 Musical Theme (Hash)
Musical Theme Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 33820 Accepted: 11259 D ...
- python基础四-文件读取
文件读取 open()接受一个参数:要打开的文件名, 并返回一个表示文件的对象, 存储到后面的变量中 python会在当前执行文件所在目录查找 可以使用绝对路径, 在linux中使用'/', 在win ...
- MySQL三层结构、用户权限、索引设计原则
一.守护进程是什么? Linux Daemon(守护进程)是运行在后台的一种特殊进程.它独立于控制终端并且周期性地执行某种任务或等待处理某些发生的事件.它不需要用户输入就能运行而且提供某种服务,不是对 ...
- 浅谈DP
DP是一个范围极广的一门重要的算法,它与其他算法不同的是,它并没一套固定的公式,而是通过一种特定的思路,来进行无后效性的转移.其本质是通过一个状态转移至另一状态,将问题从大化小,并找到这些小问题之间的 ...