REM布局计算,移动端,pc端有兼容性)
rem布局计算(移动端,pc端有兼容性)
<!DOCTYPE html>
<html>
<head lang="en">
<script>
function rootREM() {
var W = document.documentElement.clientWidth;
W = (W <= 640) ? W : 640;
document.documentElement.style.fontSize = W / 10 + 'px';
document.body.style.fontSize = W / 20 + 'px';
}
window.onresize = function () {
rootREM()
};
</script>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
</head>
<body onload="rootREM()">
<div style="max-width: 640px;">
<br/>你好,世界!
<br/>你好,世界!
<br/>你好,世界!
<br/>你好,世界!
<br/>你好,世界!
<br/>你好,世界!
<br/>你好,世界!
<br/>你好,世界!
<br/>你好,世界!
<br/>你好,世界!
<br/>你好,世界!
<br/>你好,世界!
<br/>你好,世界!
<br/>你好,世界!
<br/>你好,世界!
<br/>你好,世界!
<br/>你好,世界!
<br/>你好,世界!
<br/>你好,世界!
<br/>你好,世界!
<br/>你好,世界!
<br/>你好,世界!
<br/>你好,世界!
</div>
</body>
</html>
REM布局计算,移动端,pc端有兼容性)的更多相关文章
- 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端和手机端抓包的 ...
- rem布局计算(移动端,pc端有兼容性)
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <script> 5 functio ...
- 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 ...
随机推荐
- printk 函数消息是如何记录的
printk 函数将消息写入一个 LOG_BUF_LEN 字节长的环形缓存, 长度值从 4 KB 到 1 MB, 由配置内核时选择. 这个函数接着唤醒任何在等待消息的进程, 就是说, 任何在系统 ...
- NPM 的基本使用
最近闲来无事,将之前的零散笔记整理到博客园,如有错误欢迎指教. 1,常用npm命令 npm list // 查看本地已安装模块清单 npm view vux versions 现在的vux包在npm服 ...
- 廖雪峰Java12maven基础-2maven进阶-2模块管理
1. 把大项目拆分为模块是降低软件复杂度的有效方法 在Java项目中,我们通常会会把一个项目分拆为模块,这是为了降低软件复杂度. 例如:我们可以把一个大的项目氛围module-a, module-b, ...
- 菜鸟nginx源码剖析数据结构篇(三) 单向链表 ngx_list_t[转]
菜鸟nginx源码剖析数据结构篇(三) 单向链表 ngx_list_t Author:Echo Chen(陈斌) Email:chenb19870707@gmail.com Blog:Blog.csd ...
- PAT甲级——A1005 Spell It Right
题目描述 Given a non-negative integer N, your task is to compute the sum of all the digits of N, and out ...
- 05-python 学习第五天-简单验证码
通过python 随机数可以制作简单的验证码. 1.0版本来了,这验证码,只有一个码,功能虽然达不到,逻辑还是准确的,目前还不能算是验证码,但是我们会继续完善的. import random # 导入 ...
- C++ 静态对象
一:什么是静态对象? 对象的存储方式是静态的. 局部静态对象和类的静态对象. 局部静态对象:一个变量在函数内部定义,其生命周期跨越了该函数的多次调用.局部对象确保不迟于 ...
- IIS+PHP+MYSQL搭建
以下安装过程是在win7环境下: mysql安装参照前面windows下的mysql zip格式安装.下面主要讲除mysql以外的安装. 一.IIS安装 确保CGI被安装. 二.IIs安装成功后,安装 ...
- Android Studio增加assets目录、raw目录
assets与res/raw不同 assets目录是Android的一种特殊目录,用于放置APP所需的固定文件,且该文件被打包到APK中时,不会被编码到二进制文件. Android还存在一种放置在re ...
- IntelliJ IDEA 如何在同一个窗口创建多个项目
一.IntelliJ IDEA与Eclipse的区别 二.在同一个窗口创建多个项目 1.打开IntelliJ IDEA,点击Create New Project 2.Java Enterprise ...