成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

superPershing / 2235人閱讀

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

CSS5:移動端頁面(響應(yīng)式) 
如果手機(jī)端和PC端頁面差別很大,就不要寫響應(yīng)式,不要寫@media 就直接將兩個頁面拆開成兩個文件就可以了.關(guān)于判斷是手機(jī)端你還是PC端,就交給后端來做
只有一些新聞?wù)军c(diǎn)和博客站點(diǎn)用響應(yīng)式,因為布局簡單,響應(yīng)式足夠
1.媒體查詢 media query

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

注意:

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

也可以規(guī)定詳細(xì)范圍:

1.1引用方法

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

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

1.2 要向設(shè)計師要網(wǎng)頁設(shè)計圖 1.3 隱藏菜單響應(yīng)式

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

1.3.1先做手機(jī)還是先做PC

Mobile first 先做手機(jī)
desktop first 先做PC
推薦Mobile first,因為現(xiàn)在大部分都是手機(jī)看網(wǎng)頁

1.3.2CSS優(yōu)先級問題解決方法

用谷歌開發(fā)者工具查看CSS優(yōu)先級,然后調(diào)整

如果style內(nèi)嵌在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;每個容器里面的項目兩側(cè)的間隔相等。*/
            background-color: #ccc;
        }
代碼

預(yù)覽




    
    
    
    響應(yīng)式頁面
手機(jī)端要加一個meta viewport

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

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



name="viewport" :視口
content="width=device-width,寬度等于設(shè)備寬度,意思就是不要變成980,用設(shè)備寬度.
user-scalable=no, 用戶是否可以縮放:不許縮放,因為我在代碼里已經(jīng)給用戶適配好了
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
初始縮放倍數(shù),最大縮放倍數(shù),最小縮放倍數(shù),都是1.0,即使不能縮放

這句話縮寫語法:
mate:vp

總結(jié)這個meta作用:

防止手機(jī)頁面模擬 980 像素寬度

防止頁面在用戶雙擊的時候放大

防止用戶兩指縮放頁面

3.移動端的特點(diǎn) 3.1flex布局是專門給手機(jī)定制的

只要學(xué)會flex布局,手機(jī)端布局基本OK手機(jī)端的交互方式不一樣

3.2手機(jī)端的交互方式不一樣

沒有 hover

有 touch 事件
如何監(jiān)聽滑動事件?記錄兩次滑動時候的坐標(biāo),相減,就可以了.
有封裝的庫,例如jquery swipe, vue里的插件

沒有 resize
手機(jī)端的寬度永遠(yuǎn)跟設(shè)備寬度一樣

沒有滾動條
滾動條會隱藏,會變成一個指示器,跟PC端不一樣

沒有ie,意思就是什么CSS屬性都可以用,不用考慮兼容的問題

4.CSS3的calc()使用

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

平時在制作頁面的時候，總會碰到有的元素是100%的寬度。眾所周知，如果元素寬度為100%時，其自身不帶其他盒模型屬性設(shè)置還好，要是有別的，那將導(dǎo)致盒子撐破。比如說，有一個邊框，或者說有margin和padding，這些都會讓你的盒子撐破。我們換句話來說，如果你的元素寬度是100%時，只要你在元素中添加了border,padding,margin任何一值，都將會把元素盒子撐破（標(biāo)準(zhǔn)模式下，除IE怪異模式）。雖然前面介紹的CSS3屬性中的box-sizing在一定程度上解決這樣的問題，其實的calc()函數(shù)功能實現(xiàn)上面的效果來得更簡單。

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/116729.html

相關(guān)文章

  • 前端面試題（移動適配，閉包，this，HTTP狀態(tài)碼，排序思路，頁面加載，數(shù)組去重）

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

    chaos_G 評論0 收藏0

  • CSS中的class與id區(qū)別及用法

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

    Carl 評論0 收藏0

  • Web移動端頁面 --響應(yīng)式和動態(tài)REM

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

    BLUE 評論0 收藏0

  • 響應(yīng)式設(shè)計個人的一些總結(jié)

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

    LeoHsiun 評論0 收藏0

  • 談?wù)?em>響應(yīng)式布局

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

    smallStone 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<