在页面rem布局中用到的js代码
在你的页面加入以下代码,就初步搞定了
function fontSize() {
var view_width = document.getElementsByTagName('html')[0].getBoundingClientRect().width;
var _html = document.getElementsByTagName('html')[0];
view_width > 768 ? _html.style.fontSize = 100 * 768 / 375 + 'px' : _html.style.fontSize = view_width * 100 / 375 + 'px';
}
fontSize();
window.onresize = function() {
fontSize();
}
让一个页面充满屏幕,加入以下代码
var htmlHeigt=window.innerHeight;
var rebate_home=document.getElementsByClassName('rebate_home')[0].clientHeight;
this.offset={
height:(htmlHeigt-rebate_home)+'px',
background:'#eff0f4'
}
this.offset=htmlHeigt>rebate_home?{
height:htmlHeigt+'px'
}:{
height:rebate_home+'px'
}
在页面rem布局中用到的js代码的更多相关文章
- 如何在一个网站或者一个页面,去书写你的JS代码
// JavaScript Document //如何在一个网站或者一个页面,去书写你的JS代码: //1.js的分层(功能) : jquery(tools) 组件(ui) 应用(app), mvc( ...
- 手机页面rem布局
手机页面设计一般的大小是640,但是,手机屏幕大小确实不确定的,这样,怎么才能做出适应所有手机的手机页面呢?一般的解决方案有两种,rem布局和百分比布局,更推荐用rem布局来制作手机页面. 首先,给页 ...
- H5 页面 rem 布局适配方法
rem 布局适配方案 主要方法为: 按照设计稿与设备宽度的比例,动态计算并设置 html 根标签的 font-size 大小: css 中,设计稿元素的宽.高.相对位置等取值,按照同等比例换算为 re ...
- 刷新页面后,让控制台的js代码继续执行
在各种限时,秒杀活动中,有个自动循环的点击的工具是很重要的. 为了方便起见,我们把Js代码放在浏览器的控制台执行,但是刷新页面后,js代码就清空了,也就无法执行. 可以用js代码实现一个不受页面刷新影 ...
- 在div+css中用到的js代码注意return
今天做了一个项目,美工做好后放在了form中(没有加runat=server),由于用到了服务器控件,所以这里要加,否则报错,关键一段div代码是: <form id="form_re ...
- 响应式布局(rem布局),使用JS动态设置fontsize
var cw = document.documentElement.clientWidth; if (cw > 1920) { cw = 1920; } document.getElements ...
- 细说移动端 经典的REM布局 与 新秀VW布局
和以往一样,本次项目也放到了 Github 中,欢迎围观 star ~ 1. 前言 2. 基本概念 3. REM布局 4. VW布局 实现单边边框1px 实现多边边框1px 实现边框圆角 实现容器固定 ...
- 移动端开发rem布局之less+媒体查询布局的原理步骤和心得
rem即是以html文件中font-size的大小的倍数rem布局的原理:通过媒体查询设置不同屏幕宽度下的html的font-size大小,然后在css布局时用rem单位取代px,从而实现页面元素大小 ...
- yii2 如何在页面底部加载css和js
作者:白狼 出处:www.manks.top/article/yii2_load_js_css_in_end 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接 ...
随机推荐
- Python之‘’控制流‘’
一.if语句 格式: i1 = 3 if i1 > 4: print('yes you are right') elif 0 < i1 < 4: print('im dont kon ...
- NOIP2018初赛总结(提高组)(试题+答案+简要解析)
NOIP2018初赛总结(提高组) 更新完毕(纯手敲),如果有错误请在下面留言 单选题 T1.下列四个不同进制的数中,与其它三项数值上不相等的是 A.\((269)_{16}\) B.\((617)_ ...
- luogu1900 自我数
分享一个非正解的做法 本题解内存最低(\(\le1\rm MiB\)) 但是不开O2会tle 思路:每个数字仅会更新出1个新的数字,而且这个新数字比旧数字最多也就大70多.所以这里还是利用" ...
- CF580D Kefa and Dishes 状压dp
When Kefa came to the restaurant and sat at a table, the waiter immediately brought him the menu. Th ...
- Python之将字符串转换为字节的两种方法
s = '你是谁' a = bytes(s,'utf-8') # ==> 得出的 a 的结果就是对应的字节 s.encode('utf-8') # ==> 该命令将字符串转换为字节形式
- FileLoadException: 未能加载文件或程序集"aliyun-net-sdk-cf, Version=1.0.0.0,
清理缓存解决 C:\Windows\Microsoft.NET\Framework64\v4.0.30319\Temporary ASP.NET Files C:\Windows\Microsoft. ...
- python解决excel工作薄合并处理
年度了,要对每个月的数据进行总的汇总,去计算每消耗品的使用情况,表格都在一个工作表的不同sheet中,并且格式相同,所以就用python写了这个小脚本,现在把脚本粘贴出来,以后有需要就可以在此基础上改 ...
- 转 Comparison of Red Hat and Oracle Linux kernel versions and release strings
Originally derived from Red Hat Enterprise Linux (RHEL), Oracle Linux (OL) contains minor difference ...
- Broken Keyboard (a.k.a. Beiju Text) UVA - 11988 (链表)
题目链接:https://vjudge.net/problem/UVA-11988 题目大意:输入一个字符串,输出在原本应该是怎么样的? 具体方法是 碰到' [ ' 回到最前面 碰到‘ ]’ 回 ...
- leetcode 627. Swap Salary 数据库带判断的更新操作
https://leetcode.com/problems/swap-salary/description/ 用 set keyWord = Case depentedWord when haha ...