admin管理员组文章数量:1558087
媒体查询
- 响应式的界面不局限于某一固定分辨率。所以如何在不同的尺寸的设备上很好地展示界面,是一个很大的问题。
为了更好的适配设备,我们按照不同的分辨率对设备进行了划分。
在这里插入代码片/* 大屏幕(大桌面显示器,大于等于 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转换、浏览器兼容、手机端视频播放解决方案 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dongtai/1727375192a1111620.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论