web移动端布局之流式布局

作者: 雨中晨星 | 来源:发表于2020-03-07 12:20 被阅读0次

移动布局
rem布局
2020-10-30 web移动端
web移动端布局之流式布局
Flutter 小部件流式布局、自动换行（Wrap、Flow）
Flutter 之流式布局（Wrap、Flow）
移动端布局技术选型
移动web开发_流式布局
移动端流式布局
[前端学习]移动web部分学习笔记，第一天

移动端布局之流式布局meta视口标签，写移动端布局必须加入视口标签：

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">

二倍图：在移动端布局中，我们需要一个5050像素（css像素）的图片直接放到我们的iphone8 里面会放大2倍 100 100 就会模糊，我们采取的方法是放一个 100* 100 图片然后手动的把这个图片缩小为 50* 50 （css像素），我们准备的图片比我们实际需要的大小大2倍，这就方式就是 2倍图

   <style>        
        img:nth-child(2) {
            width: 50px;
            height: 50px;
        }
    </style>
</head>

<body>
    <!-- 第一张图是模糊的 -->
    <img src="images/apple50.jpg" alt="">
    <!-- 我们采取2倍图 -->
    <img src="images/apple100.jpg" alt="">
</body>

background-size设置图片的宽度和高度，只有一个参数就是宽度，高度自适应等比例缩放

  <style>
        div {
            width: 500px;
            height: 500px;
            border: 2px solid red;
            background: url(images/dog.jpg) no-repeat;
            /* background-size: 图片的宽度 图片的高度; */
             background-size: 200px; 
            /* 1.只写一个参数 肯定是宽度 高度省略了  会等比例缩放 */
            /* background-size: 500px; */
            /* 2. 里面的单位可以跟%  相对于父盒子来说的 */
            /* background-size: 50%; */
            /* 3. cover 等比例拉伸 要完全覆盖div盒子  可能有部分背景图片显示不全 */
            /* background-size: cover; */
            /* 4. contain 高度和宽度等比例拉伸 当宽度 或者高度 铺满div盒子就不再进行拉伸了 可能有部分空白区域 */
            /*background-size: contain;*/
        }
    </style>