rem布局,使用手机端,pc大屏——亲测好用
1 var docEl = document.documentElement,
2 //当设备的方向变化(设备横向持或纵向持)此事件被触发。绑定此事件时,
3 //注意现在当浏览器不支持orientationChange事件的时候我们绑定了resize 事件。
4 //总来的来就是监听当前窗口的变化,一旦有变化就需要重新设置根字体的值
5 resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
6 recalc = function() {
7 //设置根字体大小1:50适用于375的设计稿,需要变更,就更改基础字体的数值
8 docEl.style.fontSize = docEl.clientWidth / 10 + 'px';
9 };
10
11 //绑定浏览器缩放与加载时间
12 window.addEventListener(resizeEvt, recalc, false);
13 document.addEventListener('DOMContentLoaded', recalc, false);
rem布局,使用手机端,pc大屏——亲测好用的更多相关文章
- REM布局计算,移动端,pc端有兼容性)
rem布局计算(移动端,pc端有兼容性) <!DOCTYPE html> <html> <head lang="en"> <script& ...
- 手机端html5触屏事件(touch事件)
touchstart:触摸开始的时候触发 touchmove:手指在屏幕上滑动的时候触发 touchend:触摸结束的时候触发 而每个触摸事件都包括了三个触摸列表,每个列表里包含了对应的一系列触摸点( ...
- (转)手机端html5触屏事件(touch事件)
本文转载自:http://blog.sina.com.cn/s/blog_51048da70101f0ex.html touchstart:触摸开始的时候触发 touchmove:手指在屏幕上滑动的时 ...
- 自适应reset.js布局 用于手机端页面编写
以下是reset.js具体内容,是从淘宝网站拔下来的.把它存为js文件引入html里,它的默认尺寸是iphone4的分辨率也就是320*480,美工给你的图不管多少尺寸用ps量图后像素值(px)除以4 ...
- jquery photoClip支持手机端,PC端 本地裁剪图片后上传插件
支持手机,PC最好的是jquery photoClip插件,下载地址&示例:https://github.com/topoadmin/photoClip demo.html 代码: <! ...
- 实现手机端上下左右滑屏的jq原生代码和使用库·两种办法
先来一个原生的.我使用的是jq. 需要注意的地方就是被触发的元素最好不要是body,这个代码也可以修改,如果obj传进来的是body那么,$(this)必须是你的监听元素,不然会冒泡泡,整个项目就…… ...
- vue手机端横屏竖屏切换
1.建一个空白的vue文件,添加上如下代码 data() { this.$router.go(-1) return {} } 2.在需要横屏竖屏切换的页面中加入如下代码: beforeMount( ...
- 转:手机端html5触屏事件(touch事件)
touchstart:触摸开始的时候触发 touchmove:手指在屏幕上滑动的时候触发 touchend:触摸结束的时候触发 而每个触摸事件都包括了三个触摸列表,每个列表里包含了对应的一系列触摸点( ...
- 手机端Swiper 触屏滑动
在线实例 默认 响应式 垂直 空间间隔 滚动 自动滚动 中心化 中心化自动 免费模式 多个滚动 水平滚动 grab-cursor 使用方法 <div class="swiper-con ...
- 仿今日头条app手机端顶部触屏滑动导航
swiper.js <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
随机推荐
- tryhackme进攻性渗透测试-Advanced Exploitation 高级利用
Steel Mountain 侦察 Nmap -sC -sV -O $IP -oN basic_scan.nmap Nmap -script=vuln $IP -oN vuln_scan.nmap 总 ...
- 《深入理解 FFmpeg》第一章彩色插图汇总
layout: post title: "<深入理解 FFmpeg>第一章彩色插图" tags: - "FFmpeg" 这是<深入理解 FFm ...
- 初始OpenGL
OpenGL到底是什么? 一般它被认为是一个API,包含一系列操作图形,图像的函数.然而,它并不是一个API,而是Khronos组织制定并维护的规范. OpenGL规定了每个函数如何执行,以及它们的输 ...
- 51Nod 1085 01背包
01背包入门题,刚学完当写模板. 在N件物品取出若干件放在容量为W的背包里,每件物品的体积为W1,W2--Wn(Wi为整数),与之相对应的价值为P1,P2--Pn(Pi为整数).求背包能够容纳的最大价 ...
- 同样的SQL,怎么突然就慢了?
本篇文章素材来源于某银行系统的一次性能问题分析. 许久没写这种troubleshooting类型的技术文章了,因为曾在服务公司呆过多年,工作原因,这方面之前做的多,听的更多,导致已经达到在自己认知维度 ...
- 如何使用libgdx做游戏01---libgdx的安装
一般来说使用这个工具做游戏的都是java开发者,这种技术在国外勉强算是必学的,而在国内却很少有这方面的知识. 接下来,我将讲解如何安装libgdx,也算是简单的libgdx入门 工具:idea.jdk ...
- 华企盾DSC导致wps个人模式无策略组新建的文件仍然加密
解决方法:右键wps安装目录手动解密即可(原因:wps模板被加密导致)
- MyBatis高频面试题
1.MyBatis中使用#和$书写占位符有什么区别? 2.Hibernate 与 Mybatis区别(MyBatis与Hibernate有什么不同). 3.持久层设计要考虑的问题有哪些? 4.你用过的 ...
- Codeforces Round 911 (Div. 2) 总结
第一次在赛场上敲莫反,还好最后调出来了! A 题意:你在Minecraft里挖了一些一格的坑(同一列),问你用几桶水可以填满它(可以造无限水). 解法:找大于 \(2\) 的连续段,有的话就是两桶,没 ...
- 从零玩转前后端加解密之SM2-sm2
title: 从零玩转前后端加解密之SM2 date: 2022-08-21 19:42:00.907 updated: 2023-03-30 13:28:48.866 url: https://ww ...