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

資訊專(zhuān)欄INFORMATION COLUMN

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

lpjustdoit / 701人閱讀

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

響應(yīng)式

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

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

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

那為什么還要學(xué)呢。。。
應(yīng)付面試啊！

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

方法1 -- css寫(xiě)法 
// 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 ~ 正無(wú)窮
    body{ background:purple }
}
方法2 -- link寫(xiě)法 
用文件代替內(nèi)容
應(yīng)用 
做響應(yīng)式的時(shí)候：
先做手機(jī) 再做網(wǎng)站 --- Mobile first 【推薦】
先做網(wǎng)站 再做手機(jī) --- Desktop first

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

//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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

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

相關(guān)文章

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

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

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

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

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

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

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

    摘要：媒體查詢(xún)的用法媒體查詢(xún)包含一個(gè)可選的媒體類(lèi)型和，滿(mǎn)足規(guī)范的條件下，包含零個(gè)或多個(gè)表達(dá)式，這些表達(dá)式描述了媒體特征，最終會(huì)被解析為或。還有一個(gè)與眾不同的是，在其他瀏覽器中不要像其他屬性一樣在不同的瀏覽器中添加前綴。 媒體查詢(xún)的用法 media 媒體查詢(xún)包含一個(gè)可選的媒體類(lèi)型和，滿(mǎn)足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í)代成為了避不開(kāi)的話(huà)題之一接下來(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í)代成為了避不開(kāi)的話(huà)題之一,接下來(lái)我們從小到大來(lái)談?wù)勴憫?yīng)式網(wǎng)頁(yè)...

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

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

0條評(píng)論

閱讀需要支付1元查看
<