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月份提出的一个 ...
随机推荐
- 【洛谷P2868】Sightseeing Cows
题目大意:给定一个 N 个点,M 条边的有向图,点有点权,边有边权,求该有向图中的一个环,使得环上点权和与环上边权和之比最大. 题解:0/1 分数规划思想,每次二分一个 mid,在新图上跑 spfa, ...
- UOJ176 新年的繁荣
题目链接 Boruvka生成树算法 \(Boruvka\)算法就是先把每个点看作一个联通块,然后不断在联通块之间找最优的边进行合并.因为每次联通块的数量最少缩小一半.所以合并次数是\(log\)的 先 ...
- [luogu1552][派遣]
题目链接 思路 首先肯定要树形dp,一直没想到怎么用左偏树.如果不断弹出又不断地合并复杂度不就太高了.瞄了眼题解才知道可以直接用大根树.然后记录出当前这棵左偏树的大小(树里面所有点的薪水之和)以及点的 ...
- 高DPI下界面错乱的解决方法和原理
来源: http://bbs.csdn.net/topics/370177760 我在win32 + c写的界面中解决办法,就是把字体的字号给固定了,这样做的结果就是,不管dpi是否有改变,界面中控件 ...
- 外显子分析思路总结(Exome Sequencing Analysis review)
趁着周末,大好的日子,总结了一下外显子分析的思路(套路)
- bzoj2733 离线+并查集+主席树
https://www.lydsy.com/JudgeOnline/problem.php?id=2733 网上清一色的合并线段树题解,我又不会,只能自己胡来,没想到Rush过去了 永无乡包含 n 座 ...
- data_type
import logging logger = logging.getLogger("simple_example") logger.setLevel(logging.DEBUG) ...
- python IDLE颜色设置
相信刚学习python的朋友们,都还是挺喜欢python自带的IDLE,但是白的代码背景色以及其它的代码色如何更改呢? Step1:找到config-Highlight.cfg文件,win在C:\Us ...
- saltstack SLS
SLS文件定义 SLS(代表SaLt State文件)是Salt State系统的核心.SLS描述了系统的目标状态,由格式简单的数据构成.这经常被称作配置管理 top.sls 是配置管理的入口文件,一 ...
- java io系列05之 ObjectInputStream 和 ObjectOutputStream
本章,我们学习ObjectInputStream 和 ObjectOutputStream ObjectInputStream 和 ObjectOutputStream 介绍 ObjectInputS ...