成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

superPershing / 2204人閱讀

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

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

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

注意:

所以要倒過(guò)來(lái)寫,先寫大范圍

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

1.1引用方法

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

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

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

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

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

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

1.3.2CSS優(yōu)先級(jí)問(wèn)題解決方法

用谷歌開發(fā)者工具查看CSS優(yōu)先級(jí),然后調(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;這個(gè)容器使用flex布局
            justify-content屬性定義了項(xiàng)目在主軸上的對(duì)齊方式。
           justify-content: space-around;每個(gè)容器里面的項(xiàng)目?jī)蓚?cè)的間隔相等。*/
            background-color: #ccc;
        }
代碼

預(yù)覽




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

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

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



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

這句話縮寫語(yǔ)法:
mate:vp

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

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

防止頁(yè)面在用戶雙擊的時(shí)候放大

防止用戶兩指縮放頁(yè)面

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

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

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

沒有 hover

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

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

沒有滾動(dòng)條
滾動(dòng)條會(huì)隱藏,會(huì)變成一個(gè)指示器,跟PC端不一樣

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

4.CSS3的calc()使用

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

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

移動(dòng)端頁(yè)面布局常用哪些屬性？

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/116729.html

相關(guān)文章

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

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

    chaos_G 評(píng)論0 收藏0

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

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

    Carl 評(píng)論0 收藏0

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

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

    BLUE 評(píng)論0 收藏0

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

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

    LeoHsiun 評(píng)論0 收藏0

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

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

    smallStone 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<