浏览器兼容性处理
当前市场上流通的有各种分辨率的电子设备,要兼容所有设备成本太高或者无法实现,根据项目需求,针对性的兼容部分常用分辨率&部分厂商才是上上之选,同时也节约开发成本。
1. 分辨率兼容
谷歌浏览器分辨率调试扩展插件window resizer: https://chromecj.com/web-development/2018-05/989/download.html,亲测有效,尺寸大小设置需要加16px宽度。
分辨率兼容也是根据项目实际需求进行兼容,大屏展示特殊处理。
市面上常见的分辨率有以下几种:
常用分辨率兼容的手段有:
- bootstrap 的栅格系统(媒体查询实现,见下面案例);
- rem 布局(即通过媒体查询控制跟元素html的字体大小,其他元素统一采用rem为距离单位,进行动态调整);
- flex布局;
- 版心布局(版心宽度固定如980px;居中显示,不随浏览器分辨率的变大而变大,只增加两侧留白,具有局限性,美观性不足)。
分辨率兼容核心方法为:媒体查询,一般情况下可要求UI设计师出两版(最小分辨率,1920分辨率)UI高保真图片,配合实现页面样式布局。
话不多说,见以下案例:最小分辨率兼容1366,小于1366采用横向滚动条展示,必须兼容1366、1440、1680、1920等四种常见分辨率,代码编写如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
html,body {
min-width: 1366px;
height: 100%;
overflow-x: auto;
}
.ul-list {
font-size: 0;
}
.ul-list li {
width: 16.667%;
height: 100px;
display: inline-block;
box-sizing: border-box;
border: 1px solid #ccc;
padding: 10px;
}
@media screen and (max-width: 1920px) {
.ul-list li {
width: