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=" ...
随机推荐
- 《REBEL Relation Extraction By End-to-end Language generation》阅读笔记
论文来源 代码地址 相关视频(YouTube) 相关概念: 1.What is natural language understanding (NLU)? Natural language ...
- [ARC156D] Xor Sum 5
Problem Statement You are given a sequence of $N$ non-negative integers $A=(A_1,A_2,\dots,A_N)$ and ...
- Hnswlib 介绍与入门使用
Hnswlib是一个强大的近邻搜索(ANN)库, 官方介绍 Header-only C++ HNSW implementation with python bindings, insertions a ...
- 7、If分支语句
1.程序的流程结构 程序的流程控制结构一共有三种: 顺序结构 选择结构 循环结构. 顺序结构: 从上向下 逐行执行 选择结构:条件满足,某些代码才会执行.0-1次 分支语句: if,switch,se ...
- SQLServer清空数据库日志
-------SQl2008以上 清空日志-------- USE[master] GO ALTER DATABASE [数据库名称] SET RECOVERY SIMPLE WITH NO_WAIT ...
- 如何抑制特定 clang-tidy 警告
️ clang-tidy 的规则能够帮助检查潜在的问题,不要盲目抑制警告! 可以通过添加 NOLINT, NOLINTNEXTLINE, 以及 NOLINTBEGIN - NOLINTEND 注释来抑 ...
- Cesium中用到的图形技术——Computing the horizon occlusion point
译者注:本文翻译自Cesium官方博文<Computing the horizon occlusion point>,by KEVIN RING. 你厌倦了地平线剔除吗? 太好了,我也没有 ...
- 云小课|GaussDB(DWS)数据存储尽在掌控,冷热数据切换自如
阅识风云是华为云信息大咖,擅长将复杂信息多元化呈现,其出品的一张图(云图说).深入浅出的博文(云小课)或短视频(云视厅)总有一款能让您快速上手华为云.更多精彩内容请单击此处. 摘要: GaussDB( ...
- Python图像处理丨基于K-Means聚类的图像区域分割
摘要:本篇文章主要讲解基于理论的图像分割方法,通过K-Means聚类算法实现图像分割或颜色分层处理. 本文分享自华为云社区<[Python图像处理] 十九.图像分割之基于K-Means聚类的区域 ...
- Python图像处理丨图像的灰度线性变换
摘要:本文主要讲解灰度线性变换. 本文分享自华为云社区<[Python图像处理] 十五.图像的灰度线性变换>,作者:eastmount. 一.图像灰度线性变换原理 图像的灰度线性变换是通过 ...