DAY 13 | 自学前端第十三天

pangpangcm

已于 2022-04-26 22:05:44 修改

阅读量115

点赞数 1

分类专栏：前端自学笔记文章标签： html5 css3

于 2022-04-20 20:53:17 首次发布

本文链接：https://blog.csdn.net/weixin_39108774/article/details/124307031

版权

今天学习移动端开发流式布局

一、移动端基础

1.1浏览器现状

PC端——360、谷歌、火狐、QQ、百度、搜狗、IE
移动端——UC、QQ、欧朋、百度手机、360安全、谷歌、搜狗手机、猎豹

移动端发展晚一点，兼容性更好。
兼容移动端主流浏览器，基本处理webkit内核浏览器即可。

1.2 手机屏幕现状

尺寸多，分辨率大，碎片化严重

1.3 常见屏幕尺寸

iPhone6 plus——5.5英寸
iPad2020——10.2

1.4 移动端调试方法

搭建本地服务器
搭建外网服务器

移动端开发主要开发手机，分辨率和屏幕尺寸大小不一。

二、视口

viewport 视口就是浏览器显示页面内容的屏幕区域。

视口可以分为布局视口、视觉视口和理想视口

2.1 布局视口 layout viewport

布局视口用于PC端页面在手机上显示
iOS Android 基本将视口分辨率设置为980px，所以PC上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放页面
手机大小有不同尺寸

2.2 视觉视口 visual viewport

用户正在看到的网站的区域 注意：是网站的区域
可以通过缩放去操作视觉视口

2.3 理想视口 ideal viewport

需要手写 meta视口标签通知浏览器操作
meta视口标签主要目的：布局视口的宽度应该和理想视口宽度一致，简单理解设备有多宽，布局视口就多宽

2.4 meta视口标签

<meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0">

2.5 标准的viewpoint 设置

视口宽度和设备宽度保持一致
视口默认缩放比例1.0
不允许用户自行缩放
最大允许缩放比例1.0
最小允许缩放比例1.0

三、二倍图

3.1 物理像素&物理像素比

物理像素指屏幕显示的最小颗粒，分辨率
开发时1px和物理像素不一定相等
PC端页面，1px等于一个物理像素，但移动端各不相同
1px能显示的物理性素点的个数，叫物理像素比
早期手机1CSS像素=1物理像素
Retina（视网膜屏幕）是一种显示技术，可以把更多的物理像素点压缩到一块屏幕里，从而达到更高的分辨率

3.2 多倍图

文字或者纯色盒子放大后影响不大，但是图片放大后会模糊
图片在手机端需要专门处理，在标准的viewport中采取倍图提高图片质量
用的最多的是2倍图，市场上也有3倍图4倍图
2倍图准备手机想要显示的2倍像素，自动缩放不会模糊

3.3 背景缩放 background-size

 background-size: 500px, 200px;

 <title>背景缩放</title>
    <style>
        div {
            width: 500px;
            height: 500px;
            border: 2px solid red;
            background: url(images/img.png) no-repeat;
            background-size: 500px, 200px;
            /* 只写一个，一定是宽度，高度随着宽度等比例拉升 */
            background-size: 200px;
            /* 完全覆盖整个盒子 */
            background-size: cover;
            /* 图片最大尺寸  宽高等比拉伸，宽高其中一方铺满  可能有部分空白区域 */
            background-size: contain;
        }
    </style>
</head>

<body>
    <div></div>
</body>