rem布局计算(移动端,pc端有兼容性)
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <script>
5 function rootREM() {
6 var W = document.documentElement.clientWidth;
7 W = (W <= 640) ? W : 640;
8 document.documentElement.style.fontSize = W / 10 + 'px';
9 document.body.style.fontSize = W / 20 + 'px';
10 }
11 window.onresize = function () {
12 rootREM()
13 };
14 </script>
15 <meta charset="UTF-8">
16 <title></title>
17 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
18 </head>
19 <body onload="rootREM()">
20
21 <div style="max-width: 640px;">
22 <br/>你好,世界!
23 <br/>你好,世界!
24 <br/>你好,世界!
25 <br/>你好,世界!
26 <br/>你好,世界!
27 <br/>你好,世界!
28 <br/>你好,世界!
29 <br/>你好,世界!
30 <br/>你好,世界!
31 <br/>你好,世界!
32 <br/>你好,世界!
33 <br/>你好,世界!
34 <br/>你好,世界!
35 <br/>你好,世界!
36 <br/>你好,世界!
37 <br/>你好,世界!
38 <br/>你好,世界!
39 <br/>你好,世界!
40 <br/>你好,世界!
41 <br/>你好,世界!
42 <br/>你好,世界!
43 <br/>你好,世界!
44 <br/>你好,世界!
45
46 </div>
47
48 </body>
49 </html>
rem布局计算(移动端,pc端有兼容性)的更多相关文章
- REM布局计算,移动端,pc端有兼容性)
rem布局计算(移动端,pc端有兼容性) <!DOCTYPE html> <html> <head lang="en"> <script& ...
- js 设备判断(移动端pc端 安卓ios 微信)
苹果安卓判断 $(function () { var u = navigator.userAgent, app = navigator.appVersion; var isAndroid = u.in ...
- 移动端&PC端CSS样式兼容代码
CSS样式兼容代码 1.禁止选中复制文本 *{ user-select: none; -moz-user-select: none; -ms-user-select: none; -webkit-us ...
- js -- 移动端pc端自动切换
1. 判断浏览器类型 浏览器判断使用的github开源项目current-device,下面是地址: https://github.com/matthewhudson/current-device 在 ...
- Charles如何抓取https请求-移动端+PC端
Charles安装完成,默认只能抓取到http请求,如果查看https请求,会显示unkonw或其它之类的响应.所以需要先进行一些配置,才能抓取到完整的https请求信息.下面针对PC端和手机端抓包的 ...
- React.js 入门与实战之开发适配PC端及移动端新闻头条平台课程上线了
原文发表于我的技术博客 我在慕课网的「React.js 入门与实战之开发适配PC端及移动端新闻头条平台」课程已经上线了,文章中是目前整个课程的大纲,以后此课程还会保持持续更新,此大纲文档也会保持更新, ...
- 在前端眼中pc端和移动的开发区别
按照昨天所说,本包子今天将总结在前端开发中,pc端和移动端的区别,整理完这些区别,本包子将开始整理pc端的布局,会写实际的代码了,还是那句话,希望文章中有什么不足的地方,大家能多多指正,大家一起进步, ...
- 判断pc端还是移动,并给移动加上其它的样式文件方法
所有移动端PC端 按 640 进行排版 body, html { width: %; height: %; overflow: hidden; background-color: #; } bod ...
- JS判断android ios系统 PC端和移动端
最近公司上线移动端,需要根据不同的系统跳转到不同的产品页面,百度后发现这一段代码很好用,不但可以判断当前是什么系统,还能知道当前浏览器是什么内核,移动端PC端都已测试无问题! var browser ...
随机推荐
- Scribes:小型文本编辑器,支持远程编辑
Scribes是一款简洁的文本编辑器.现在给大家介绍下. 功能列表, Python插件扩展 支持远程编辑(如ftp, sftp, ssh, samba, webdav, webdavs) ...
- 内存问题排查工具 --- valgrind
1. 概述 2. Valgrind 3. 内存泄漏监测 3.1. 示例代码 3.2. 编译它 3.3. 用Valgrind监测进程的内存泄漏 4. 悬挂指针 4.1. 示例代码 4.2. Valgri ...
- hihocoder第226周:打表找规律
题目列表 问题描述 有一个文本框,可以执行以下操作: 输入A Ctrl+C 复制 Ctrl+V 粘贴 Ctrl+A 全选 N次操作最多能够造出多少个A来? 输入一个N,输出一个整数,表示最多有多少个A ...
- Redis学习之路(000)- 目录
本文是博主学习整理网上大神的文件以及自学的心得. Redis学习之路(000)- 目录 Redis学习之路(001)- Redis介绍以及安装(Linux) Redis学习之路(002)- Ubunt ...
- windows 系统变量
%ALLUSERSPROFILE% : 列出所有用户Profile文件位置.%APPDATA% : 列出应用程序数据的默认存放位置.%CD% : 列出当前目录.%CLIENTNAME% : 列出联接到 ...
- ROS学习(八)—— 理解ROS服务和参数
一.ROS 服务 服务(services)是节点之间通讯的另一种方式.服务允许节点发送请求(request) 并获得一个响应(response) 二.rosservice 1.用途 rosservic ...
- HDU 2492 Ping pong (数状数组)
Ping pong Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total S ...
- php加密总结
1.md5加密,加密之后是32位的字符串 2.sha1加密, 加密之后是40位的字符串 3.crypt加密, 加密之后是13位的字符串 上面是不可逆的 可逆的如下urlencode --> ur ...
- C# 自定义控件入门
原文地址:http://www.itdaan.com/blog/2008/03/29/95500785fa538b3900b34ee824376e8b.html 这几天为了什么"评估&quo ...
- Config程序配置文件操作实践进阶之ConfigurationSectionGroup
今天又进一步对System.Configuration下的ConfigurationSectionGroup类及相关的类与方法进行了研究.发现要构建多层次嵌套的XML标签 则必须用到Configura ...