07. 如何实现移动端rem适配
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />//需要这句适配的话
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box{
width: 7.5rem;
height: 7.5rem;
background: red;
} </style>
</head>
<body>
<div id="box"></div>
</body>
<script type="text/javascript">
//获取屏幕宽度
var width = document.documentElement.clientWidth; //获取html
var htmlNode = document.querySelector('html'); //设置html字体大小
htmlNode.style.fontSize = width/7.5 + 'px'; </script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <style type="text/css">
* {
margin: 0;
padding: 0;
} #box{
width: 100px;
height: 200px;
background: pink;
padding: 100px;
border: 80px solid blue;
background-image: url("img/1.png");
background-repeat: no-repeat;
background-origin: content-box;
background-position: -50px 0;
} /*答案：130px*/
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
07. 如何实现移动端rem适配的更多相关文章
- 谈谈我的移动端rem适配方案
最近有点怀疑人生,毕竟一个人写前端,有时候会怀疑自己理解的一些东西包括用法有没有符合标准.趁着这阵子闲下来,翻了翻别人的rem适配博客,发现有点绕口,怪自己是个强迫症,啥都要自己去试试结果并从中理解, ...
- 移动端rem适配&iOS兼容
移动端rem适配js // 默认375,750设计稿请将375替换为750 (function (doc, win) { // 移动端适配 var docEl = doc.documentElemen ...
- H5 端 rem 适配方案与 viewport 适配
H5 端 rem 适配方案与 viewport 适配 rem rem 是 CSS3 新增的一个相对单位(root em,根 em) 只根据当前页面 HTML 页面的 font-size 设置,如果根目 ...
- H5移动端rem适配
/** * 移动端自适应 */ <meta name="viewport" content="width=device-width,user-scalable=no ...
- 关于移动端rem适配
var num = 1 / window.devicePixelRatio; var fontSize = document.documentElement.clientWidth / 10; doc ...
- 移动端rem适配屏幕
九月已成历史,十月如期而至...可能是九月工作比较清闲,周记就没怎么写,十月决不能这么堕落,立贴为证,至少保证5篇博客!!!如果没学到什么新知识,就对以往的那些工作中常用到的知识点做个总结...话不多 ...
- 自动改变html font-size，实现移动端rem适配
移动端采用rem适配非常方便 比如在iphone6尺寸下,将html font-size 设置为 100px,那么写css时,只要将尺寸/100 + rem 即可. 在iphone6Plus尺寸下,h ...
- js动态计算移动端rem适配问题
第一:css3的media query来实现适配,例如下面这样: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 2 ...
- 移动端 rem适配方法
rem适配 一, 网易适配方法 屏幕宽度/设计稿rem宽度=页面动态font-size值(如:375/7.5=50) document.documentElement. ...
随机推荐
- How to Enabling and Diabling VxDMP devices for use with Oracle ASM
Enable DMP support for ASM to make DMP devices visible to ASM as available disks To make DMP devices ...
- SqlServer——用户自定义函数
在SQL Server中,用户不仅可以使用标准的内置函数,也可以使用自己定义的函数来实现一些特殊的功能.可以使用CREATE FUNCTION 语句创建.在创建时需要注意:函数名在数据库中必须唯一, ...
- 部署和调优 1.1 nfs部署和优化-2
更改共享目录文件默认的所有者和所属组 已知道客户端有个user11用户 cat /etc/passwd user11:x:501:501::/home/user11:/bin/bash 服务端打开 v ...
- java GC是在什么时候，对什么东西，做了什么事情？
1.新生代有一个Eden区和两个survivor区,首先将对象放入Eden区,如果空间不足就向其中的一个survivor区上放,如果仍然放不下就会引发一次发生在新生代的minor GC,将存活的对象放 ...
- [Python Study Notes]双层柱状图绘制
''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''' ...
- 下载Django
Django下载教程以及学习教程https://code.ziqiangxuetang.com/django/django-queryset-api.html 或者直接搜索自强学堂
- Contset Hunter 1102 高精度求卡特兰数
用递推的方式写的写挂了,而如果用组合数又不会高精度除法,偶然看到了别人的只用高精度乘低精度求组合数的方法,记录一下 #include<bits/stdc++.h> using namesp ...
- bzoj1951 组合数取模 中国剩余定理
#include<bits/stdc++.h> using namespace std; typedef long long ll; const int a[4]={2,3,4679,35 ...
- wpf 窗口打开后默认设置控件焦点
https://blog.csdn.net/Vblegend_2013/article/details/81771872 <Grid FocusManager.FocusedElement=&q ...
- 导出Excel解决方案之一NOPI
一.概要 导出Excel这个功能相信很多人都做过,但是实现这个功能解决方案有好几种,今天我未大家介绍一种比较新的,其实也不新了- -!它叫NPOI,可以完美操作EXCEl的导入和导出操作,让我们一起看 ...