Flex伸缩布局

最新推荐文章于 2024-10-04 06:11:34 发布

一麻袋小猫

最新推荐文章于 2024-10-04 06:11:34 发布

阅读量145

点赞数

分类专栏：移动端开发文章标签： html

本文链接：https://blog.csdn.net/Zmongo/article/details/104265788

版权

移动端开发专栏收录该内容

6 篇文章 0 订阅

订阅专栏

移动布局基础

移动端浏览器我们主要对webkit内核进行兼容
我们现在开发的移动端主要针对手机端开发
现在移动端碎片化比较严重，分辨率和屏幕尺寸大小不一
视口
就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口、理想视口
其中最常用的就是理想视口
布局视口：在早期手机还能打电话和收短信的时代。厂商萌生了把PC端的网页放在手机上显示的想法，于是就设置了一个布局视口。
iSO，Android基本都将这个视口分辨率设置为980px，所以在PC上的网页大多都能在手机上呈现，但是缺点是元素看上去很小，要通过手机缩放网页

视觉视口 能看到的区域，但显示不全
在这里插入图片描述
理想视口
手机屏幕多宽，布局视口就多宽
需要手动添写meta视口标签通知浏览器操作
meta视口标签的主要目的：设备有多宽，我们的布局视口就多宽
meta视口标签

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

width =device-width 宽度等于设备宽度
user-scalable=no 用户是否可以缩放一般是不可以
initial-scale 初使缩放比，大于0的数字
maximum-scale 最大缩放比
minimum-scale 最小缩放比

物理像素&物理像素比

分辨率就是物理像素
物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。这是厂商在出厂时就设置好了。
我们开发时候的1px不是一定等于1个物理像素
PC端页面，1个px等于1个物理像素的，但是移动端就不尽相同
一个px的能能显示的物理像素点的个数，称为物理像素比或屏幕像素比
PC端和早期的手机屏幕：1CSS像素=1物理像素
Retina(视网膜屏幕)是一种显示技术，可以将把更多的物理像素点压缩至一块屏幕里，从而达到更高的分辨率，并提高屏幕显示的细腻程度
2倍图或者多倍图
如果我们需要一个5050像素的图片，直接放到iphone8里面会放大2倍，就会模糊
这时的解决方案是放一个100100的图片，手动把这个图片缩小为50*50（css像素）
准备的图片，比实际开发需要的大小大2倍这种方式就是2倍图

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
    <title>Document</title>
    <style>
        img:nth-child(2) {
            width: 50px;
            height: 50px;
        }
    </style>
</head>

<body>
    <!-- 模糊的 -->
    <img src="images/apple50(1).jpg" alt="">
    <!-- 我们采取2倍图 -->
    <img src="images/apple100.jpg" alt="">
</body>

</html>

background-size 背景尺寸

background-size: 500px 200px;
/* 只写一个参数肯定是宽度高度省略了 /
/ 里面的单位可以跟%，相对于父亲来说 /
/ cover把背景图像填满覆盖至整个区域 ,可能有部分背景图片显示不全*/
background-size: cover;
background-size: contain;
/* 到宽度或者高度极限之后就不再继续拉伸了 */