rem适配手机
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>Title</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
} #box{
width:0.5rem;
height:0.5rem;
background: red;
}
</style>
</head>
<body>
<div id="box"></div>
</body> <script type="text/javascript">
window.onload =function(){
var width =document.documentElement.clientWidth;
console.log("width:",width)
var htmlNode =document.querySelector('html');
console.log("htmlNode:",htmlNode)
htmlNode.style.fontSize=width + 'px'
console.log("htmlNode2:",htmlNode.style.fontiSize)
}
</script>
</html>
1、 var width =document.documentElement.clientWidth 获取手机的宽度像素
2、 var htmlNode =document.querySelector('html'); 获取html的元素
3、htmlNode.style.fontSize=width + 'px' 将html默认的16px换成手机的像素,后面就是1rem;
rem适配手机的更多相关文章
- 了解真实的『REM』手机屏幕适配
rem 作为一个低调的长度单位,由于手机端网页的兴起,在屏幕适配中得到重用.使用 rem 前端开发者可以很方便的在各种屏幕尺寸下,通过等比缩放的方式达到设计图要求的效果. rem 的官方定义『The ...
- 真实的『REM』手机屏幕适配
rem 作为一个低调的长度单位,由于手机端网页的兴起,在屏幕适配中得到重用.使用 rem 前端开发者可以很方便的在各种屏幕尺寸下,通过等比缩放的方式达到设计图要求的效果. rem 的官方定义『The ...
- webapp思路和rem适配极其viewport
webapp在制作时候,页面上要加入viewport标签,用来进行适配; viewport的meta标签,指的是在移动端显示的时候,viewport是多大?移动端的浏览器是屏幕宽,viewport一般 ...
- 谈谈我的移动端rem适配方案
最近有点怀疑人生,毕竟一个人写前端,有时候会怀疑自己理解的一些东西包括用法有没有符合标准.趁着这阵子闲下来,翻了翻别人的rem适配博客,发现有点绕口,怪自己是个强迫症,啥都要自己去试试结果并从中理解, ...
- 移动端 rem适配方法
rem适配 一, 网易适配方法 屏幕宽度/设计稿rem宽度=页面动态font-size值(如:375/7.5=50) document.documentElement. ...
- 移动端rem适配屏幕
九月已成历史,十月如期而至...可能是九月工作比较清闲,周记就没怎么写,十月决不能这么堕落,立贴为证,至少保证5篇博客!!!如果没学到什么新知识,就对以往的那些工作中常用到的知识点做个总结...话不多 ...
- 自动改变html font-size,实现移动端rem适配
移动端采用rem适配非常方便 比如在iphone6尺寸下,将html font-size 设置为 100px,那么写css时,只要将尺寸/100 + rem 即可. 在iphone6Plus尺寸下,h ...
- 最佳移动端h5自适应rem适配方案
一.利用lib-flexible.postcss-plugin-px2rem插件 进行移动端rem适配. 1.第一 引入lib-flexible . 安装lib-flexible: npm i lib ...
- rem适配布局(rem+less+媒体查询 和 rem+flexible.js)
1. rem 基础 rem 是一个相对单位,类似于 em ,em 是父元素字体大小. em 是相对于父元素 的字体大小来说的 rem 是相对于 html 元素 字体大小来说的 rem 优点 就是可以 ...
随机推荐
- NX二次开发-获得图纸抑制尺寸的表达式UF_DRF_ask_controlling_exp
#include <uf.h> #include <uf_modl.h> #include <uf_drf.h> #include <uf_obj.h> ...
- github如何用浏览器直接打开项目里的html页面?
very easy 第一步 点击html页面 第二步,在地址栏前加 htmlpreview.github.io/?就可以访问
- [JZOJ 5810] 简单的玄学
思路: 就是考虑一个结论 对于\(1<=x<=2^n\),那么\(x\)与\(2^n - x\)中的2的个数相等. 证明: 我们将\(x\)表示成\(2^k*b\),那么\(2^n - x ...
- c# ToString()格式大全(转)
stringstr1 =string.Format("{0:N1}",56789); //result: 56,789.0stringstr2 =str ...
- class8_Canvas 画布
最终的部分运行效果图(程序见序号4): #!/usr/bin/env python# -*- coding:utf-8 -*-# ----------------------------------- ...
- super 关键字的使用及说明
super 关键字主要用于访问父类的变量和方法. 代码示例: public class Student { String name; public Student(){ System.out.prin ...
- ubuntu 删除 mysql (转)
1 sudo apt-get autoremove --purge mysql-server-5.0 2 sudo apt-get remove mysql-server 3 sudo apt-get ...
- 《转》python 10 集合
自 http://www.cnblogs.com/BeginMan/p/3160565.html 一.目录 1.集合概述 2.关于集合的操作符.关系符号 3.集合的一系列操作(添加.更新.访问.删除) ...
- Django 前后端数据传输、ajax、分页器
返回ORM目录 Django ORM 内容目录: 一.MTV与MVC模式 二.多对多表三种创建方式 三.前后端传输数据 四.Ajax 五.批量插入数据 六.自定义分页器 一.MTV与MVC模式 M ...
- 关于python merge后数据行数增加的问题
其中一个可能的原因是 join 的 data 里面的列不唯一,也就是要匹配的表里面有些一行数据对应了被匹配表多条数据,这样出来可能会增加行数,可以再查一下被匹配表里的数据是否去重