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

superPershing 發布于2019-08-30 15:53 / 2172人閱讀

摘要：接下來做端一般都寫手機最大也就先隱藏手機菜單和按鈕優先級問題解決方法直接使用用谷歌開發者工具查看優先級里面的垂直居中再把寫成布局只要改成里面的子項目就變成一行了菜單導航導航導航導航導航到航導航導航導航導航方法切換元素的可見狀態。

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

如果手機端和PC端頁面差別很大,就不要寫響應式,不要寫@media 就直接將兩個頁面拆開成兩個文件就可以了.關于判斷是手機端你還是PC端,就交給后端來做
只有一些新聞站點和博客站點用響應式,因為布局簡單,響應式足夠

1.媒體查詢 media query

媒體:電腦,紙張,都是媒體
含義:如果媒體滿足0到800 之間,那么會應用這里面的樣式

注意:

所以要倒過來寫,先寫大范圍

也可以規定詳細范圍:

1.1引用方法

也可以使用CSS文件的方法引用

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

1.2 要向設計師要網頁設計圖 1.3 隱藏菜單響應式

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

1.3.1先做手機還是先做PC

Mobile first 先做手機
desktop first 先做PC
推薦Mobile first,因為現在大部分都是手機看網頁

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;
        }

代碼

預覽

手機端要加一個meta viewport

歷史原因:最開始手機瀏覽器(蘋果三)會在自己的三四百像素的手機上模擬980像素的顯示效果,然后讓用戶自己去縮放,查看網頁.

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

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()函數功能實現上面的效果來得更簡單。

移動端頁面布局常用哪些屬性？

 display: flex
 width: calc(50% - 10px);

GPU云服務器云服務器移動端頁面移動端頁面顯示移動端html頁面響應式

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116729.html

前端面試題（移動適配，閉包，this，HTTP狀態碼，排序思路，頁面加載，數組去重）

摘要：例如狀態碼表示響應成功。答狀態碼表示服務器已接受請求，但尚未處理。狀態碼表示發送的請求需要有通過認證的認證信息。狀態碼表示服務器端在執行請求時發生了錯誤。響應報文也是由三部分組成狀態碼響應報頭和響應報文。前端面試題（移動適配，閉包，this，HTTP狀態嗎，排序思路，頁面加載，數組去重） 1 請寫出一個符合 W3C 規范的 HTML 文件請寫出一個符合 W3C 規范的 HTML 文...

chaos_G 2019-08-22 18:40 評論0 收藏0
CSS中的class與id區別及用法

摘要：與基本屬性及用法在程序中稱類，同時在中也書面語也叫類。在樣式中以小寫的點及來命名如屬性屬性值而在頁面里則以來選擇調用命名好的又叫選擇器。也就是說只是頁面元素的標識，供其他元素腳本等引用。? ? 我們平常在用DIV CSS制作Xhtml網頁頁面時，常會用到class 和id來選擇調用CSS樣式屬性。 CLASS與ID基本屬性及用法： Class 在程序中稱類，同時在CSS中也書面語也叫類。 ...

Carl 2019-04-23 11:57 評論0 收藏0
Web移動端頁面 --響應式和動態REM

摘要：當媒介最大寬度為且是橫屏時里面的樣式生效目前前端開發項目類型可以分為兩種方式，和。這樣我們的響應式網頁才完全生效了。移動端特點移動端特點沒有有沒有滾動條沒有沒有因為移動端是沒有事件的所以當我們在需要兼容移動端的頁面中應該盡量少用事件。鄙人最近才剛剛開始學習一些關于移動端的知識，還只是個小白，文中可能有許多理解錯誤，望指出，請多多見諒。響應式什么是響應式頁面呢？顧名思義響應式頁面就是能做...

BLUE 2019-04-23 13:44 評論0 收藏0
響應式設計個人的一些總結

摘要：所以一個網，甚至是響應式設計，在兩個平臺上都會損害您整體的。三響應式與如果把網站作為一個單獨的網站，如果網站的內容與桌面版的內容相對缺少，導致用戶回到桌面端的網站，會記錄這種選擇，使搜索排名降低，國內百度就不知道會怎樣。一、為什么需要響應式設計（responsible web design） 1. 響應式發展背景 1、屏幕尺寸的快速變化，iphone為320x480，分辨率在未來可以...

LeoHsiun 2019-08-01 15:32 評論0 收藏0
談談響應式布局

摘要：今天在這里就略微談一下響應式布局吧想必大家都知道響應式布局已經在這個移動端為主流的時代成為了避不開的話題之一接下來我們從小到大來談談響應式網頁設計的基本原則為什么為什么需要響應式設計想必這點不說大家都能想到答案現在是一個移動為先的時代我們要今天在這里就略微談一下響應式布局吧,想必大家都知道響應式布局已經在這個移動端為主流的時代成為了避不開的話題之一,接下來我們從小到大來談談響應式網頁...

smallStone 2019-08-29 11:30 評論0 收藏0