002-浏览器兼容性处理

豚豚鼠

已于 2024-03-07 15:52:03 修改

阅读量382

点赞数 2

分类专栏： 004.浏览器文章标签： chrome devtools javascript css

于 2020-05-07 18:34:07 首次发布

本文链接：https://blog.csdn.net/loveEveryWeb/article/details/105971108

版权

浏览器兼容性处理

1. 分辨率兼容
2. 不同厂商兼容
- 2.1 css兼容
- 2.2 javascript 兼容

当前市场上流通的有各种分辨率的电子设备，要兼容所有设备成本太高或者无法实现，根据项目需求，针对性的兼容部分常用分辨率&部分厂商才是上上之选，同时也节约开发成本。

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:

最低0.47元/天解锁文章

豚豚鼠

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
002-浏览器兼容性处理

浏览器兼容性处理1. 分辨率兼容当前市场上流通的有各种分辨率的电子设备，要兼容所有设备成本太高或者无法实现，根据项目需求，针对性的兼容部分常用分辨率&部分厂商才是上上之选，同时也节约开发成本。1. 分辨率兼容谷歌浏览器分辨率调试扩展插件： https://chromecj.com/web-development/2018-05/989/download.html，亲测有效，尺寸大小...
复制链接

扫一扫