(html+css)_移動端適配方案一（流式布局）

本文轉載自查看原文 2019-07-16 23:13 2577 css/html

一、前言

小案例地址：https://github.com/xiexumei/web-demo

二、主要內容

1、移動端面對的問題：因為手機屏幕和尺寸不一樣，當我們用不同手機設備瀏覽的時候為了提高用戶體驗必須要做移動端適配

2、解決方案一: 流式布局 + viewport視口進行設置

流式布局：就是百分比布局，非固定像素，內容向兩側填充，理解成流動的布局，稱為流式布局*/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 100%;
            background: pink;
        }
        /*流式布局：就是百分比布局，非固定像素，內容向兩側填充，理解成流動的布局，稱為流式布局*/
    </style>
</head>
<body>
    <div class="box">
        內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容
        內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容
        內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容
        內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容
        內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容
        內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容
        內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容
        內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容
        內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容
    </div>
</body>
</html>

01流式布局.html

演示效果如下：當我們縮放瀏覽器窗口的時候，里面的內容像水流一樣，跟着瀏覽器窗口適應

Viewport：比如當我們將照片放到相框中的時候，如果照片比較大就需要縮小照片尺寸。這個viewport就相當於嵌套在照片外面的一個虛擬的寬度，這樣我們將網頁放到viewport中的時候就可以縮放網頁。但是在移動端的時候由於窗口比較小可能導致看不清楚文字等。

是移動端特有。這是一個虛擬的區域，承載網頁的。

3、要做到適配必須滿足如下幾個要求

1）網頁尺寸的寬度必須和瀏覽器保持一致

2）默認顯示的縮放比例要和pc端保持一致（縮放比例是1.0）

3）不允許用戶自行縮放網頁

4、適配設置以及參數配置

標准適配方案：

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

快捷方式：meta:vp + tab

參數配置：

width	可以設置寬度（width = device-width）設置當前視口為當前設備寬度
height	可以設置高度
initial-scale	可以設置默認的縮放比例
user-scalable	可以設置是否允許用戶自行縮放（user-scalable=yes/no）
maximum-scale	可以設置最大縮放比例
minimum-scale	可以設置最小縮放比例

5、以京東首頁為例

一、准備篇

（1）做移動端適配之前需要處理一些基本的樣式

/*=======reset css========*/
*,
*::before,
*::after{
    /*所有的標簽，和偽元素都選中*/
    margin: 0;
    padding: 0;
    /*移動端常用布局是非固定像素*/
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    /*點擊高亮效果的清除*/
    tap-highlight-color: transparent;
    -webkit-tap-highlight-color: transparent;
}
body{
    font-size: 14px;
    font-family: "Microsoft YaHei",sans-serif;
    color: #333;
}
ul,ol{
    list-style: none;
}
a{
    text-decoration: none;
    color: #333;
}
input,textarea{
    border: none;
    outline: none;
    /*不允許改變尺寸*/
    resize: none;
    /*元素的外觀  none沒有任何樣式*/
    -webkit-appearance: none;
}
/*=======common css========*/
.f_left{
    float: left;
}
.f_right{
    float: right;
}
.clearFix::before,
.clearFix::after{
    content: "";
    display: block;
    visibility: hidden;
    height: 0;
    line-height: 0;
    clear: both;
}
.m_l10{
    margin-left:10px;
}
.m_r10{
    margin-right:10px;
}
.m_t10{
    margin-top:10px;
}
.m_b10{
    margin-bottom:10px;
}
/*使用精靈圖的公用樣式*/
[class^="icon_"],[class*=" icon_"]{
    background-repeat: no-repeat;
    background-image: url("../images/sprites.png");
    background-size: 200px 200px;
}

（2）根據設計樣式搭好布局

（3）設置圖的尺寸准備。

1.最大寬度設置成了640px
2.設計稿psd的尺寸就是640px
3.目的：當設備的尺寸比設計稿不至於失真
4.640px的尺寸設計稿的原因：根據當前主要流行的設備尺寸有關系iphone4,4s 尺寸320px
5.750px的設計稿：參考原型iphone6 尺寸375px
6.最小寬度320px 保證最小的寬度320px不讓頁面錯亂

所以設置好container版心的最大寬度和最小寬度

/*版心*/
.jd_container{
    min-width: 320px;/*最小尺寸*/
    max-width: 640px;/*最大尺寸*/
    width: 100%;
    margin: 0 auto;
}

一、開始篇

（一）頂部收索框的流式布局。

1、分析：當縮放窗口的時候，搜索框的左右兩邊的大小是固定的，只是input框的寬度會縮放。

2、布局

 <!--頂部搜索-->
    <header class="jd_search">
        <div class="jd_search_box">
            <a href="#" class="red icon_logo"></a>
            <form action="#">
                <span class="icon_search"></span>
                <input type="search" placeholder="占位符">
            </form>
            <a href="#" class="login">登錄</a>
        </div>
    </header>

3、css樣式

/*頂部搜索*/
.jd_search{
    width: 100%;
    height: 40px;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;
}
/*內容居中*/
.jd_search .jd_search_box{
    height: 40px;
    background: rgba(201,21,35,0.85);
    min-width: 320px;
    max-width: 640px;
    width: 100%;
    margin: 0 auto;
    position: relative;
}
.jd_search .jd_search_box .icon_logo{
    position: absolute;
    left: 10px;
    top: 4px;
    width: 60px;
    height: 36px;
    background-position: 0 -103px;
}
.jd_search .jd_search_box .login{
    position: absolute;
    right: 0;
    top: 0;
    width: 50px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #fff;
}
.jd_search .jd_search_box form{
    width: 100%;
    padding-left:70px;
    padding-right:50px;
    position: relative;
}
.jd_search .jd_search_box form .icon_search{
    width: 20px;
    height: 20px;
    position: absolute;
    left: 80px;
    top: 10px;
    background-position: -60px -109px;
}
/*百分比的計算：基於父容器的內容的寬度*/
.jd_search .jd_search_box form input{
    width: 100%;
    height: 30px;
    margin-top:5px;
    background: #fff;
    border-radius: 15px;
    padding-left: 40px;
}

頂部樣式

（二）輪播圖

1、分析：因為手機滑動第一張和最后一張的時候為了避免六百，輪播的顯示圖片會比顯示的多出兩張

2、布局：

3、樣式

.jd_banner{
    width: 100%;
    overflow: hidden;
    position: relative;
}
.jd_banner ul:first-child{
    width: 1000%;
    transform: translateX(-10%);
    -webkit-transform: translateX(-10%);
}
.jd_banner ul:first-child li{
    width: 10%;
    float: left;
}
.jd_banner ul:first-child li a{
    display: block;
    width: 100%;
}
.jd_banner ul:first-child li a img{
    display: block;
    width: 100%;
}
.jd_banner ul:last-child{
    position: absolute;
    width: 118px;
    height: 6px;
    left: 50%;
    margin-left:-59px;
    bottom: 6px;
}
.jd_banner ul:last-child li{
    width: 6px;
    height: 6px;
    border-radius: 3px;
    border: 1px solid #fff;
    margin-left:10px;
    float: left;
}
.jd_banner ul:last-child li:first-child{
    margin-left:0;
}
.jd_banner ul:last-child li.now{
    background: #fff;
}

輪播圖樣式

（三）導航

1、分析：在收縮窗口的時候只是導航之間的間距進行了收縮，圖片並沒有收縮、所以我們需要將圖片的大小設置為固定的。

2、布局

  <!--導航欄-->
    <nav class="jd_nav">
        <ul class="clearFix">
            <li><a href="#"><img src="images/nav0.png" alt=""><p>分類</p></a></li>
            <li><a href="#"><img src="images/nav1.png" alt=""><p>分類</p></a></li>
            <li><a href="#"><img src="images/nav2.png" alt=""><p>分類</p></a></li>
            <li><a href="#"><img src="images/nav3.png" alt=""><p>分類</p></a></li>
            <li><a href="#"><img src="images/nav4.png" alt=""><p>分類</p></a></li>
            <li><a href="#"><img src="images/nav5.png" alt=""><p>分類</p></a></li>
            <li><a href="#"><img src="images/nav6.png" alt=""><p>分類</p></a></li>
            <li><a href="#"><img src="images/nav7.png" alt=""><p>分類</p></a></li>
        </ul>
    </nav>

3、樣式

/*導航欄*/
.jd_nav{
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #ccc;
}
.jd_nav ul{
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
}
.jd_nav ul li{
    width: 25%;
    float: left;
}
.jd_nav ul li a{
    display: block;
    width: 100%;
}
.jd_nav ul li a img{
    display: block;
    width: 40px;
    height: 40px;
    margin: 0 auto;
}
.jd_nav ul li a p{
    text-align: center;
    font-size: 12px;
    color: #666;
    padding: 5px 0;
}

nav

（四）京東超市模塊

1、分析：由於這個模塊的樣式比較相似，所以我們可以將公共的樣式提取出來

2、結構：

3、組合樣式

/*組合樣式的使用*/
.w_50p{
    width: 50%;
}
.w_50p img{
    display: block;
    width: 100%;
}
.bl{
    border-left:1px solid #ddd;
}
.br{
    border-right:1px solid #ddd;
}
.bb{
    border-bottom:1px solid #ddd;
}

三、總結

1、解決手機端圖片失真問題

假設圖片的大小為400px * 400px

background: url(image.png)  no-repeat 0 -103px / 200px 200px;

壓縮之后定位也需要壓縮為原來的一半

2、解決img與文字之間的上下間隙問題

font-size:0px;

display:block /*給圖片設置*/

vertical-align:middle/*給圖片設置*/

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 web前端移動端適配方案百分比布局（流式布局）和rem布局（等比縮放）的介紹移動端適配方案移動端適配方案移動端適配方案適配方案（一）之移動端適配移動端適配方案研究移動端vw適配方案 web移動端適配方案 web移動端屏幕適配方案移動端常用適配方案一