響應式 --- 媒體查詢

時間 2019-12-07

標籤響應媒體查詢简体版

原文原文鏈接

響應式

我本身的理解
就是限制住像素範圍
而後分別寫入一套css
HTML就寫兩套或者更多但只顯示一套css

其實吧
如今！！！
不多有網站是用響應式寫的
主流的一些像是某寶某東ios

都是用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寫法

用文件代替內容

<!-- HTML -->
<head>
    <!-- 這個css 在該範圍下才會生效 -->
    <link rel='stylesheel' href='style.css' media='(max-width：320px)'/>
</head>

應用

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

用js判斷一下是網站仍是手機
並寫入不一樣的地址url

//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 標籤

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

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。