媒体查询、px和rem转换、浏览器兼容、手机端视频播放解决方案

媒体查询

响应式的界面不局限于某一固定分辨率。所以如何在不同的尺寸的设备上很好地展示界面，是一个很大的问题。
为了更好的适配设备，我们按照不同的分辨率对设备进行了划分。

在这里插入代码片/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: 1200px) { ... }/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: 992px) { ... }/* 小屏幕（平板，大于等于 768px） */
@media (min-width: 768px) { ... }/* 超小屏幕（手机，小于 768px） */
media (max-width: 767px) { ... }

布局

尽量采用flex布局，自适应宽高。

单位（px -> rem）

因为px是相对长度单位，所以使用px为单位的话，PC端正常显示的布局，在移动端大小和间距会显得特别大。
rem是是CSS3新增的一个相对单位（root em，根em），使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应
所以我们通过判断当前设备的分辨率计算出一个合适的"根元素"大小。

@media only screen and (min-width: 320px){html {font-size: 62.5% !important;}
}
@media only screen and (min-width: 640px){html {font-size: 125% !important;}
}
@media only screen and (min-width: 750px){html {font-size: 150% !important;}
}
@media only screen and (min-width: 1242px){html {font-size: 187.5% !important;}
}

浏览器兼容

常见的浏览器内核可以分四种：Trident、Gecko、Blink、Webkit
- Chrome浏览器：Webkit内核，现在是Blink内核
- Firefox浏览器：Gecko内核，俗称Firefox内核
- Safari浏览器：Webkit内核
- Opera浏览器：Blink内核
- 360浏览器：IE+Chrome双内核
- 猎豹浏览器：IE+Chrome双内核
- 百度浏览器：IE内核
- QQ浏览器：Trident（兼容模式）+Webkit（高速模式）
css方面一般在私有属性前面加对应的前缀
- -moz代表firefox浏览器私有属性
- -ms代表IE浏览器私有属性
- -webkit代表chrome、safari私有属性
- -o代表opera私有属性
js方面遇到问题
- 语法问题

// Safari和IE下会有兼容问题
window.onload = funcRef;
// DOM的事件绑定不会有兼容问题
window.addEventListener('resize', function () {...
})// Safari和IE下会有兼容问题
video.onplay = funcRef;
// DOM的事件绑定不会有兼容问题
video.addEventListener('play', function () {...
})// IE下通过``拼接字符串会报错
const a = 'a';
const ab = `${a}b`;
// 兼容方法 用连接符代理``
const abc = a + 'bc'

手机端视频播放解决方案

由于<video>标签在安卓手机上无法屏蔽系统自带的播放控件且，需求方要求必须在移动端使用视频效果。
- 方案1.0: PC端使用video为背景，移动端使用切图+css动画展示
  pass原因：动效太弱没有，粒子聚合效果
- 方案2.0：ios系统使用视频背景，安卓继续使用css动画
  pass原因：安卓动效太弱，ios微信浏览器打开不能自动播放
- 方案3.0：将动效视频切图，手机端加载每一帧高清大图轮播切换模拟视频动效
  轮播实现大致如下：

const activeImg = document.getElementById('active-img');
const imgGroups = [];for (let i = 0; i < 268; i++) {const img = new Image();let fileName = '';if (i < 10) {fileName = 'notice-bg00' + i + '.png';} else if (i >= 10 && i < 100) {fileName = 'notice-bg0' + i + '.png';} else if (i >= 100) {fileName = 'notice-bg' + i + '.png';}img.src = './static/vimgs-min/' + fileName;img.onload = function () {imgGroups.push({src: img.src, index: i});if(i === 0) {activeImg.src = img.src;}if (imgGroups.length === 268) {const newGroups = imgGroups.sort(compare('index'))transform(newGroups);}}
}// 排序  防止图片顺序错误
function compare(prop) {return function (obj1, obj2) {const val1 = obj1[prop];const val2 = obj2[prop];if (val1 < val2) {return -1;} else if (val1 > val2) {return 1;} else {return 0;}}
}
let timer = null;// 开始轮播
function transform(imgGroups) {clearTimeout(timer);let i = 1;const max = imgGroups.length;function draw() {if (i < max) {activeImg.src = imgGroups[i].src;i++;timer = setTimeout(draw, 20);} else {clearTimeout(timer);i = 0;transform(imgGroups);}}draw();
}

媒体查询、px和rem转换、浏览器兼容、手机端视频播放解决方案相关推荐

IE6,IE7和8浏览器兼容HTML5标签的解决方案
html5大行其道的时代已经到来.如果你还在等待浏览器兼容,说明你已经与web脱节几条街了.当然,这得益于移动客户端的蓬勃发展.如果还在纠结于,是否应该掌握html5和css3技术时,请狠狠的抽自己 ...
《JS实现复制内容到剪贴板功能，可兼容所有PC浏览器，不兼容手机端》
前记:本来原生的JS是有提供一个函数来实现这个功能(window.clipboardData),但是很遗憾,这个函数仅仅支持IE和FF浏览器,所以基本用处不大.下边介绍的是一个第三方插件库(ZeroC ...
PHPCMS V9 实现下拉加载的方法,兼容手机端（附源码下载）
PHPCMS V9 实现下拉加载的方法,兼容手机端 HTML部分 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 2 ...
chrome浏览器调试手机端h5页面
这个是常识性的问题了.奈何我之前确实是不知道.只知道用F12来调试PC端的页面,这次经过同事指点,终于知道为啥人家在浏览器调试手机端页面,显示的大小都是手机端的. 步骤: 1.打开F12 2.如果所示 ...
php html5手机端多张图片上传,php+html5兼容手机端的图片选取裁剪上传实例
网上大多图片上传插件都不带裁剪功能,这个是php+html5实现的兼容手机端的图片选取裁剪上传实例,分享出来希望能帮到大家. 首先放置一个上传按钮及相关预览信息等注意:上传前,先截图文件大小类型 ...
还在纠结选择用什么浏览器？手机端用国产浏览器也很香
一说到受欢迎的电脑浏览器,大家肯定不约而同地说谷歌浏览器.微软edge浏览器能够同步书签.插件也非常多,因为这些优势深受国人的喜爱.有人纠结在国内选择谷歌好,还是edge浏览器好呢?可能有的人哪个也不 ...
JS判断是PC浏览器还是手机端浏览器
JS判断是电脑浏览器还是手机端浏览器,并根据不同的终端跳转到不同的网址 <!DOCTYPE html> <html> <script> function brows ...
linux smb视频,利用 CentOS 7 samba 服务器与 ES 文件浏览器实现手机端在线播放电脑端视频...
环境以下环境仅代表本文测试环境,其它版本应该也可以. 虚拟机 Linux: CentOS Linux release 7.4.1708 (Core) 物理机 Windows: Windows 10 ...
总结一些谷歌新版本浏览器测试手机端swipe事件遇到的问题
最近使用谷歌新版本浏览器测试手机端swipe事件时碰到无效的效果, 原因是谷歌新版浏览器禁止了移动端的一些默认事件,具体解决方法如下: 1.改body加上css样式: body{touch-actio ...

媒体查询、px和rem转换、浏览器兼容、手机端视频播放解决方案

媒体查询

布局

单位（px -> rem）

浏览器兼容

手机端视频播放解决方案

媒体查询、px和rem转换、浏览器兼容、手机端视频播放解决方案相关推荐

最新文章

热门文章