CSS5:移動端頁面(響應式)

時間 2019-11-10

標籤 css5 css 移動頁面響應欄目 CSS 简体版

原文原文鏈接

CSS5:移動端頁面(響應式)

若是手機端和PC端頁面差異很大,就不要寫響應式,不要寫@media 就直接將兩個頁面拆開成兩個文件就能夠了.關於判斷是手機端你仍是PC端,就交給後端來作
只有一些新聞站點和博客站點用響應式,由於佈局簡單,響應式足夠

1.媒體查詢 media query

媒體:電腦,紙張,都是媒體
含義:若是媒體知足0到800 之間,那麼會應用這裏面的樣式css

<style>
        @media (max-width: 800px){/*若是媒體知足0到800 之間,那麼會應用這裏面的樣式*/
            body{
                background-color: red;
            }
        }
    </style>

注意:html

<style>
        @media (max-width: 800px){/*若是媒體知足0-800 之間,那麼會應用這裏面的樣式*/
            body{
                background-color: red;
            }
        }
        @media (max-width: 900px){/*若是媒體知足0-900 之間,那麼會應用這裏面的樣式*/
            body{/*這段媒體查詢比上面優先級高,會將上面的覆蓋,若是低於800了,會變成藍色*/
                background-color: blue;
            }
        }
    </style>

因此要倒過來寫,先寫大範圍vue

<style>
        @media (max-width: 768px){/*0-768*/
            body{
                background-color: blue;
            }
        }

        @media (max-width: 425px){/*0-425*/
            body{
                background-color: red;
            }
        }
        @media (max-width: 375px){/*0-375*/
            body{
                background-color: orange;
            }
        }
        @media (max-width: 320px){/*0-320*/
            body{
                background-color: black;
            }
        }@media (min-width: 769px){/*769~+++*/
         /*超過769的*/
            body{
                background-color: green;
            }
        }

    </style>

也能夠規定詳細範圍:
jquery

1.1引用方法

也能夠使用CSS文件的方法引用
css3

https://segmentfault.com/ (這個網站就用了響應式)
還有https://www.smashingmagazine....
能隨着你屏幕寬度動的頁面就是響應式頁面git

1.2 要向設計師要網頁設計圖

1.3 隱藏菜單響應式

預覽地址(縮小瀏覽器寬度查看效果)github

1.3.1先作手機仍是先作PC

Mobile first 先作手機
desktop first 先作PC
推薦Mobile first,由於如今大部分都是手機看網頁ajax

1.3.2CSS優先級問題解決方法

用谷歌開發者工具查看CSS優先級,而後調整
若是style內嵌在html裏,好比jquery的toggle,那麼直接使用display: none !important;

1.3.3flex佈局的一些用法

header{
                display: flex;
                /*裏面的垂直居中*/
                align-items: center;
            }

header .mobilMenu {

            display: flex;
            justify-content: space-around;
            /*flex佈局display: flex;這個容器使用flex佈局
            justify-content屬性定義了項目在主軸上的對齊方式。
           justify-content: space-around;每一個容器裏面的項目兩側的間隔相等。*/
            background-color: #ccc;
        }

代碼

預覽segmentfault

<!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">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>響應式頁面</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
    </script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        a {
            text-decoration: none;
            color: inherit;
        }

        ul, ol {
            list-style: none;
        }

        .logo {
            width: 60px;
            height: 60px;
            background: #000;
            border-radius: 50%;
        }

        header {
            position: relative;
        }

        header > button {
            position: absolute;
            right: 0;
            top: 26px;
        }

        header .mobilMenu {

            display: flex;
            justify-content: space-around;
            /*flex佈局display: flex;這個容器使用flex佈局
            justify-content屬性定義了項目在主軸上的對齊方式。
           justify-content: space-around;每一個容器裏面的項目兩側的間隔相等。*/
            background-color: #ccc;
        }
        header .pcMenu{
            display: none;
        }
        /*接下來作pc端*/
        @media (min-width: 451px) {
            /*通常都寫 451,手機最大也就450px*/
            /*先隱藏手機菜單和按鈕*/
            header .mobilMenu{
                display: none !important;
                /**CSS優先級問題解決方法:

                1.直接使用display: none !important;
                2.用谷歌開發者工具查看CSS優先級
                */
            }
            header > button  {
                display: none;
            }

            header{
                display: flex;
                /*裏面的垂直居中*/
                align-items: center;
            }

            /*再把pcMenu寫成flex佈局*/
            header .pcMenu{
                display: flex;/*只要改爲flex 裏面的子項目就變成一行了*/
                margin-left: 20px;
                background: red;
            }
            header .pcMenu>li{
                margin-left: 20px ;
            }
        }

    </style>
</head>
<body>
<header>
    <div class="logo"></div>
    <button id="menu">菜單</button>
    <ul class="mobilMenu">
        <li><a href="#">導航1</a></li>
        <li><a href="#">導航2</a></li>
        <li><a href="#">導航3</a></li>
        <li><a href="#">導航4</a></li>
        <li><a href="#">導航5</a></li>
    </ul>

    <ul class="pcMenu">
        <li><a href="#">pc到航1</a></li>
        <li><a href="#">導航2</a></li>
        <li><a href="#">導航3</a></li>
        <li><a href="#">導航4</a></li>
        <li><a href="#">導航5</a></li>
    </ul>
</header>
</body>
<script>
    $('#menu').on('click', function () {
        $('.mobilMenu').toggle();//toggle() 方法切換元素的可見狀態。若是被選元素可見，則隱藏這些元素，若是被選元素隱藏，則顯示這些元素。
    //缺點:若是使用toggle(),他會把display這個style的屬性內嵌到放在html裏.
    })
</script>
</html>

手機端要加一個meta viewport

歷史緣由:最開始手機瀏覽器(蘋果三)會在本身的三四百像素的手機上模擬980像素的顯示效果,而後讓用戶本身去縮放,查看網頁.

那麼就告訴瀏覽器不要縮放個人網頁,手機屏幕是多少像素,就顯示多少像素的網頁.使用下面的代碼後端

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

name="viewport" :視口
content="width=device-width,寬度等於設備寬度,意思就是不要變成980,用設備寬度.
user-scalable=no, 用戶是否能夠縮放:不準縮放,由於我在代碼裏已經給用戶適配好了
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
初始縮放倍數,最大縮放倍數,最小縮放倍數,都是1.0,即便不能縮放

這句話縮寫語法:
mate:vp

總結這個meta做用:

防止手機頁面模擬 980 像素寬度
防止頁面在用戶雙擊的時候放大
防止用戶兩指縮放頁面

3.移動端的特色

3.1flex佈局是專門給手機定製的

只要學會flex佈局,手機端佈局基本OK手機端的交互方式不同

3.2手機端的交互方式不同

沒有 hover
有 touch 事件
如何監聽滑動事件?記錄兩次滑動時候的座標,相減,就能夠了.
有封裝的庫,例如jquery swipe, vue裏的插件
沒有 resize
手機端的寬度永遠跟設備寬度同樣
沒有滾動條
滾動條會隱藏,會變成一個指示器,跟PC端不同
沒有ie,意思就是什麼CSS屬性均可以用,不用考慮兼容的問題

4.CSS3的calc()使用

連接:https://www.w3cplus.com/css3/...

平時在製做頁面的時候，總會碰到有的元素是100%的寬度。衆所周知，若是元素寬度爲100%時，其自身不帶其餘盒模型屬性設置還好，要是有別的，那將 致使盒子撐破。好比說，有一個邊框，或者說有margin和padding，這些都會讓你的盒子撐破。咱們換句話來講，若是你的元素寬度是100%時，只要你在元素中添加了border,padding,margin任何一值，都將會把元素盒子撐破（標準模式下，除IE怪異模式）。雖然前面介紹的CSS3屬性中的box-sizing在必定程度上解決這樣的問題，其實的 calc()函數功能實現上面的效果來得更簡單。

移動端頁面佈局經常使用哪些屬性？