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

資訊專欄INFORMATION COLUMN

響應(yīng)式 --- 媒體查詢

lpjustdoit / 656人閱讀

摘要：響應(yīng)式我自己的理解就是限制住像素范圍然后分別寫入一套就寫兩套或者更多但只顯示一套其實(shí)吧現(xiàn)在很少有網(wǎng)站是用響應(yīng)式寫的主流的一些像是某寶某東都是用判斷也就是做一個(gè)端一個(gè)移動(dòng)端看用戶用的是電腦還是手機(jī)根據(jù)判斷結(jié)果更改頁面地址那為什么還要學(xué)呢。。。

響應(yīng)式

我自己的理解
就是限制住像素范圍
然后分別寫入一套css
HTML就寫兩套或者更多 但只顯示一套

其實(shí)吧
現(xiàn)在！??！
很少有網(wǎng)站是用響應(yīng)式寫的
主流的一些像是 某寶 某東

都是用js判斷
也就是做一個(gè)pc端 一個(gè)移動(dòng)端
看用戶用的是電腦還是手機(jī)
根據(jù)判斷結(jié)果 更改頁面地址

那為什么還要學(xué)呢。。。
應(yīng)付面試?。?/p>

反正又不難
學(xué)就學(xué)嘍

方法1 -- css寫法 
// CSS
@media(max-width:320){ // 320像素以下執(zhí)行里面的css  范圍：0 ~ 320
    body{ background:red }
}


@media(min-width:321) and ( max-width:375 ){ // css  范圍：321 ~ 375
    body{ background:blue }
}


@media(min-width:376){ // css  范圍：376 ~ 正無窮
    body{ background:purple }
}
方法2 -- link寫法 
用文件代替內(nèi)容
應(yīng)用 
做響應(yīng)式的時(shí)候：
先做手機(jī) 再做網(wǎng)站 --- Mobile first 【推薦】
先做網(wǎng)站 再做手機(jī) --- Desktop first

用js判斷一下是網(wǎng)站還是手機(jī)
并寫入不同的地址

//js

function judge(){
        if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
            //window.location.href="移動(dòng)端url";
            alert("mobile")
        }
        else {
            // window.location.href="pc端url"; 
            alert("pc")
        }
}
judge();
meta 標(biāo)簽 
作用：標(biāo)簽就是告訴瀏覽器, 不要在移動(dòng)端顯示的時(shí)候縮放

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

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

相關(guān)文章

  • 響應(yīng)式布局的實(shí)現(xiàn)

    摘要：響應(yīng)式布局的概念響應(yīng)式布局，即，在實(shí)現(xiàn)不同屏幕分辨率的終端上瀏覽網(wǎng)頁的不同展示方式?？蚣軐?shí)現(xiàn)響應(yīng)式布局利用中柵格系統(tǒng)可以簡單實(shí)現(xiàn)響應(yīng)式布局，這里就需要去理解一下啥是柵格系統(tǒng)代表在端上顯示在一行的個(gè)柵欄，也就是一半。 響應(yīng)式布局的概念 響應(yīng)式布局，即 Responsive design，在實(shí)現(xiàn)不同屏幕分辨率的終端上瀏覽網(wǎng)頁的不同展示方式。通過響應(yīng)式設(shè)計(jì)能使網(wǎng)站在手機(jī)和平板電腦上有更好的瀏...

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

  • 響應(yīng)式web設(shè)計(jì)--媒體查詢

    摘要：媒體查詢的用法媒體查詢包含一個(gè)可選的媒體類型和，滿足規(guī)范的條件下，包含零個(gè)或多個(gè)表達(dá)式，這些表達(dá)式描述了媒體特征，最終會(huì)被解析為或。還有一個(gè)與眾不同的是，在其他瀏覽器中不要像其他屬性一樣在不同的瀏覽器中添加前綴。 媒體查詢的用法 media 媒體查詢包含一個(gè)可選的媒體類型和，滿足CSS3規(guī)范的條件下，包含零個(gè)或多個(gè)表達(dá)式，這些表達(dá)式描述了媒體特征，最終會(huì)被解析為true或false。如...

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

  • 響應(yīng)式web設(shè)計(jì)--媒體查詢

    摘要：媒體查詢的用法媒體查詢包含一個(gè)可選的媒體類型和，滿足規(guī)范的條件下，包含零個(gè)或多個(gè)表達(dá)式，這些表達(dá)式描述了媒體特征，最終會(huì)被解析為或。還有一個(gè)與眾不同的是，在其他瀏覽器中不要像其他屬性一樣在不同的瀏覽器中添加前綴。 媒體查詢的用法 media 媒體查詢包含一個(gè)可選的媒體類型和，滿足CSS3規(guī)范的條件下，包含零個(gè)或多個(gè)表達(dá)式，這些表達(dá)式描述了媒體特征，最終會(huì)被解析為true或false。如...

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

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

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

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

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

0條評(píng)論

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