響應式 --- 媒體查詢

lpjustdoit 發布于2019-08-23 18:17 / 646人閱讀

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

響應式

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

其實吧
現在！！！
很少有網站是用響應式寫的
主流的一些像是某寶某東

都是用js判斷
也就是做一個pc端一個移動端
看用戶用的是電腦還是手機
根據判斷結果更改頁面地址

那為什么還要學呢。。。
應付面試啊！

反正又不難
學就學嘍

方法1 -- css寫法

// CSS
@media(max-width:320){ // 320像素以下執行里面的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寫法

用文件代替內容

應用

做響應式的時候：
先做手機 再做網站 --- Mobile first 【推薦】
先做網站 再做手機 --- Desktop first

用js判斷一下是網站還是手機
并寫入不同的地址

//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="移動端url";
            alert("mobile")
        }
        else {
            // window.location.href="pc端url"; 
            alert("pc")
        }
}
judge();

meta 標簽

作用：標簽就是告訴瀏覽器, 不要在移動端顯示的時候縮放

云服務器 GPU云服務器響應式響應式布局響應式網站響應式設計

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

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

響應式布局的實現

摘要：響應式布局的概念響應式布局，即，在實現不同屏幕分辨率的終端上瀏覽網頁的不同展示方式。框架實現響應式布局利用中柵格系統可以簡單實現響應式布局，這里就需要去理解一下啥是柵格系統代表在端上顯示在一行的個柵欄，也就是一半。響應式布局的概念響應式布局，即 Responsive design，在實現不同屏幕分辨率的終端上瀏覽網頁的不同展示方式。通過響應式設計能使網站在手機和平板電腦上有更好的瀏...

syoya 2019-08-30 10:55 評論0 收藏0
響應式web設計--媒體查詢

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

Eric 2019-08-29 16:07 評論0 收藏0
響應式web設計--媒體查詢

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

Salamander 2019-08-02 11:00 評論0 收藏0
談談響應式布局

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

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