移动端基础：流式布局

最新推荐文章于 2024-05-14 16:13:23 发布

象更

最新推荐文章于 2024-05-14 16:13:23 发布

阅读量364

点赞数 6

文章标签：前端

本文链接：https://blog.csdn.net/m0_74227060/article/details/135789475

版权

可以用谷歌浏览器模拟手机调试

搭建本地web服务器，手机和服务器在一个局域网内，可通过手机访问服务器

使用外网服务器，通过IP或域名访问

视口

布局视口、视觉视口、理想视口

布局视口：用于解决PC端页面在手机上显示问题，会使页面过小，一般视口分辨率为980px

视觉视口：用户看到的网站区域

可以通过放缩视觉视口，但不影响布局视

理想视口，手机屏幕有多宽，视口就多宽

手动添加meta视口标签通知浏览器操作

布局视口宽度与设备一致

视口默认缩放比例为1.0

不允许用户自动缩放

最大缩放比例为1.0

最小缩放比例为1.0

二倍图

物理像素是屏幕上最小颗粒，真实存在（发光点）

开发时1px不一定等于1像素（PC端一定相同，移动端不一定相同）

1px能显示的像素个数称为物理像素比

移动端的开发尺寸（px）和设备的分辨率（像素）是不同的

解释：

PC端和早期的手机屏幕是 1CSS像素=1物理像素

Retina是一种显示技术，把更多物理像素压缩到一块屏幕（由于屏幕小，需要更多的像素）

分辨率更高更细腻

如果一张图片在手机Retina屏上打开，物理像素比会被放缩由于算法的局限性和图像内容的复杂性，生成的像素颜色可能与周围像素颜色存在差异，从而导致图像模糊或出现伪色。

可以使用二倍图：放入图片进行压缩，大小为物理像素比，再通过移动端，就会变清晰了

例：

如果移动端放一个100px*100px的图片，就需要200*200个发光点，少了就会被迫撑大，200*200个发光点在PC端200px*200px，把长宽除2就可以了

背景缩放 background-size

属性规定背景尺寸

background-size：宽高；（长度、百分比、cover、contain）

省略一个属性会等比例缩放

cover：要求把整个盒子盖住，部分背景显示不全

contain：放大至刚有一边碰到框时，等比例拉伸

流式布局（百分比布局）

引擎优化：

<header>:头部标签

<nav>:导航标签

<article>:内容标签

<section>:大号div

<aside>:侧边栏

<footer>:尾部标签

通过盒子的宽度设置成百分比来根据屏幕宽度进行伸缩，不受固定像素限制

案例：

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

<head>
   <meta charset="UTF-8">
   <meta name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
   <title>~</title>
   <link rel="stylesheet" href="css/初始化表.css">
   <link rel="stylesheet" href="css/index.css">
   <link rel="shortcut icon" href="">
   <meta name="keywords" content="..." />
   <style>
      /*写代码时始终要考虑权重问题！*/

      @font-face {
         font-family: 'icomoon';
         src: url('fonts/icomoon.eot?au9n7q');
         src: url('fonts/icomoon.eot?au9n7q#iefix') format('embedded-opentype'),
            url('fonts/icomoon.ttf?au9n7q') format('truetype'),
            url('fonts/icomoon.woff?au9n7q') format('woff'),
            url('fonts/icomoon.svg?au9n7q#icomoon') format('svg');
         font-weight: normal;
         font-style: normal;
         font-display: block;
      }
   </style>

</head>

<body>
   <header class="app">
      <ul>
         <li>x</li>
         <li><img
               src="https://gss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/2e2eb9389b504fc2f5b3daa7e3dde71191ef6da7.jpg">
         </li>
         <li>打开四次元口袋，购物更轻松</li>
         <li>立即打开</li>
      </ul>
   </header>
   <div class="search-wrap">
      <div class="left"></div>
      <div class="search">
         <div class="jd"></div>
         <div class="sou"></div>
      </div>
      <div class="right">登录</div>
   </div>

   <div class="main">
      <div class="slider"><img
            src="https://ts1.cn.mm.bing.net/th/id/R-C.d2462cec5be29f9bff11ad4de9ac97aa?rik=vzjBc9C6rKMCNA&riu=http%3a%2f%2fn.sinaimg.cn%2fent%2f20160721%2frhY3-fxuhukv7051357.jpg&ehk=NYCkvmTycRMVycOGIWQk8bnTW97BVlAEhPMLHEbqq1s%3d&risl=&pid=ImgRaw&r=0">
      </div>
      <div class="brand">
         <div>
            <a href="#">
               <img
                  src="https://ts1.cn.mm.bing.net/th/id/R-C.48527ef8e7c9dbd8e1c755667495ec78?rik=hQ2%2fC%2b%2bEg%2bggCQ&riu=http%3a%2f%2fi3.citysbs.com%2fypic%2fct_hangzhou_fashion%2f2014%2f09%2f17%2f185708_483_p3.jpg&ehk=YHd4jT9EPGNPUenug7G9tHe%2bi74WEtiKLzYMBWAuVxE%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1">
            </a>

         </div>
         <div>
            <a href="#">
               <img
                  src="https://ts1.cn.mm.bing.net/th/id/R-C.48527ef8e7c9dbd8e1c755667495ec78?rik=hQ2%2fC%2b%2bEg%2bggCQ&riu=http%3a%2f%2fi3.citysbs.com%2fypic%2fct_hangzhou_fashion%2f2014%2f09%2f17%2f185708_483_p3.jpg&ehk=YHd4jT9EPGNPUenug7G9tHe%2bi74WEtiKLzYMBWAuVxE%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1">
            </a>
         </div>
         <div>
            <a href="#">
               <img
                  src="https://ts1.cn.mm.bing.net/th/id/R-C.48527ef8e7c9dbd8e1c755667495ec78?rik=hQ2%2fC%2b%2bEg%2bggCQ&riu=http%3a%2f%2fi3.citysbs.com%2fypic%2fct_hangzhou_fashion%2f2014%2f09%2f17%2f185708_483_p3.jpg&ehk=YHd4jT9EPGNPUenug7G9tHe%2bi74WEtiKLzYMBWAuVxE%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1">
            </a>
         </div>
      </div>
      <div class="nav">
         <a href="#"><img src="https://pic2.zhimg.com/v2-82de240d64d7eb660e02b48b4444a1f4_r.jpg">
            <span>哆啦A梦</span>
         </a>
         <a href="#"><img src="https://pic2.zhimg.com/v2-82de240d64d7eb660e02b48b4444a1f4_r.jpg">
            <span>哆啦A梦</span>
         </a>
         <a href="#"><img src="https://pic2.zhimg.com/v2-82de240d64d7eb660e02b48b4444a1f4_r.jpg">
            <span>哆啦A梦</span>
         </a>
         <a href="#"><img src="https://pic2.zhimg.com/v2-82de240d64d7eb660e02b48b4444a1f4_r.jpg">
            <span>哆啦A梦</span>
         </a>
         <a href="#"><img src="https://pic2.zhimg.com/v2-82de240d64d7eb660e02b48b4444a1f4_r.jpg">
            <span>哆啦A梦</span>
         </a>
         <a href="#"><img src="https://pic2.zhimg.com/v2-82de240d64d7eb660e02b48b4444a1f4_r.jpg">
            <span>哆啦A梦</span>
         </a>
         <a href="#"><img src="https://pic2.zhimg.com/v2-82de240d64d7eb660e02b48b4444a1f4_r.jpg">
            <span>哆啦A梦</span>
         </a>
         <a href="#"><img src="https://pic2.zhimg.com/v2-82de240d64d7eb660e02b48b4444a1f4_r.jpg">
            <span>哆啦A梦</span>
         </a>
         <a href="#"><img src="https://pic2.zhimg.com/v2-82de240d64d7eb660e02b48b4444a1f4_r.jpg">
            <span>哆啦A梦</span>
         </a>
         <a href="#"><img src="https://pic2.zhimg.com/v2-82de240d64d7eb660e02b48b4444a1f4_r.jpg">
            <span>哆啦A梦</span>
         </a>
      </div>
      <div class="new">
         <a href="#">
            <img src="https://pic4.zhimg.com/v2-b92a14fa4285baeb59cefd3284324ccf_r.jpg?source=1940ef5c" alt="">
         </a><a href="#">
            <img src="https://pic4.zhimg.com/v2-b92a14fa4285baeb59cefd3284324ccf_r.jpg?source=1940ef5c" alt="">
         </a>
      </div>
   </div>
</body>

</html>

CSS：

body {
    width: 100%;
    max-width: 640px;
    min-width: 320px;
    margin: 0 auto;
    background-color: #575454;
}

.app {
    height: 46px;
}

.app ul li {
    float: left;
    height: 45px;
    background-color: #333333;
    line-height: 45px;
    text-align: center;
    color: white;
}

.app ul li:nth-child(1) {
    width: 8%;

}

.app ul li:nth-child(2) {
    width: 10%;
}

.app ul li:nth-child(2) img {
    width: 35px;
}

.app ul li:nth-child(3) {
    width: 57%;
}

.app ul li:nth-child(4) {
    background-color: #f63515;
    width: 25%;
}

.search-wrap {
    position: relative;
    height: 44px;
    overflow: hidden;
    position: fixed;
    max-width: 640px;
    min-width: 320px;
    width: 100%;

}

.left {
    position: absolute;
    top: 0;
    left: 0;
    height: 44px;
    width: 40px;
}

.left::before {
    content: '';
    display: block;
    width: 20px;
    height: 18px;
    background: url(https://pic2.zhimg.com/v2-82de240d64d7eb660e02b48b4444a1f4_r.jpg) no-repeat;
    background-size: 20px 18px;
    margin: 14px 0 0 15px;
}

.right {
    position: absolute;
    top: 0;
    right: 0;
    height: 44px;
    width: 40px;
    color: #e90e0e;
    line-height: 44px;
}

.search {
    position: relative;
    height: 30px;
    margin: 0 50px;
    border-radius: 15px;
    background-color: rgb(245, 245, 250);
    margin-top: 7px;
}

.jd {
    position: absolute;
    width: 20px;
    height: 15px;
    top: 8px;
    left: 13px;
    background: url(https://tse4-mm.cn.bing.net/th/id/OIP-C.c9fNAQiKoebJ0Xckd9RfZAHaEo?rs=1&pid=ImgDetMain);
    background-size: 20px 15px;
}

.jd::after {
    content: '';
    display: block;
    position: absolute;
    width: 1px;
    height: 15px;
    background-color: #ccc;
    right: -8px;
    top: 0;
}

.sou {
    position: absolute;
    width: 18px;
    height: 15px;
    top: 8px;
    left: 50px;
    background: url(https://cn.bing.com/rp/Qk540QN8GIaMmT8oEUEVF6N8IF8.png) no-repeat -410px -16px;
    background-size: 450px auto;

}

.slider img {
width: 100%;
}



.brand div {
    float: left;
    width: 33.33%;
    overflow: hidden;
}

.brand img {
    width: 333%;
    height: 250px;
}

.nav a {
    float: left;
    width: 20%;
    text-align: center;
}
.nav a img {
    width: 40px;
    margin: 10px 0;
}
.nav a span {
    display: block;
    color: aliceblue;
}

.new a {
float: left;
box-sizing: border-box;
border: 1px solid #ccc;
}


.new a:nth-child(1) {
width: 50%;
}

.new a:nth-child(2) {
width: 50%;
}

.new img {
    width: 100%;
}