【疑點】如何實現響應式佈局？

時間 2019-12-05

標籤疑點如何實現響應佈局简体版

原文原文鏈接

現在人們的上網方式各式各樣，有手機、ipad、電腦等等。老老實實一種媒體端很差麼，哎，不過這也是沒辦法的事兒。javascript

這時候只能靠咱們前端去兼容各個款式的顯示器了~css

想要頁面顯示的好看，又讓代碼簡易，就要用到響應式佈局。前端

此篇文章會在如下幾個方面囉嗦一下響應式佈局的各個問題：java

一、響應式佈局的優缺點chrome

二、可實現的幾個方式瀏覽器

①百分比自適應佈局佈局

②經過媒體查詢字體

③使用JS根據瀏覽器設備引用不一樣的CSS值url

三、應用開發中實際使用spa

響應式佈局的優缺點

一、優勢：

與以往的彈性盒子相比，響應式佈局會更好的、更主動的根據用戶設備變化更呈現出不一樣的效果，它比彈性盒子更靈活，可讀性更強。響應式的一套方案解決全部設備的自適應問題。

二、缺點：

研發難度高，對應的css文件多是多個，也多是單個。

可實現的幾個方式

百分比自適應佈局

一、首先容許網頁寬度自動調整

在網頁代碼的頭部，加入一行viewport元標籤。

　 代碼：　　

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

　viewport 是指須要加載meta 標籤時讀取的名字爲「視口」，網頁寬度默認等於屏幕寬度（width=device-width），原始縮放比例（initial-scale=1）爲1.0，即網頁初始大小佔屏幕面積的100%。

二、CSS代碼不使用絕對寬度！！！

因爲網頁會根據屏幕寬度調整佈局，因此不能使用絕對寬度的佈局，也不能使用具備絕對寬度的元素。

　具體說，CSS代碼不能指定像素寬度

　只能指定百分比寬度或者讓寬度自適應。

三、一樣字體也不能使用絕對大小（px），而只能使用相對大小（em）。

優勢：簡單方便

缺點：在額外設置margin、padding時，或者使用不一樣瀏覽器時，會使得佈局混亂

經過媒體查詢

三種寫法

一、直接在CSS中使用

寫法： @media 類型（常選all/screen）and (條件1) and (條件2){

CSS選擇器{

CSS屬性值

}

這裏面的，第一個 screen 意思爲屏幕，這裏面還有許多參數，包括all（用於全部設備）、print（用於打印機和打印預覽）、speech（應用於屏幕閱讀器等發聲設備）。一般直接寫all。

使用and來並列顯示多種狀況，min-width 和max-width 來定義在那種尺寸的屏幕上顯示，這就是響應式的靈魂。

注意：在寫中間值的時候，必須把最大和最小範圍都標註上。

二、使用link連接CSS,media屬性能夠設置媒體查詢方式：

<link rel="stylesheet" type="text/css" href="CSS文件夾/02-響應式佈局.css"
media="all and (max-width: 800px)"/>

注意：使用此方法時，在style標籤中就不能寫樣式了。否則此方法就會失效。

三、使用import導入，直接在url()後面使用空格，間隔媒體查詢規則：（不太經常使用）

 @import url("css/02-響應式佈局.css") all and (max-width: 800px);

優勢：如今大部分的響應式佈局都是使用@media 來實現的，能夠書寫大量的公共樣式，在須要適應屏幕的時候，在大括號內加入相應的功能便可實現響應式佈局。

缺點：可能須要對同一個類書寫不一樣的樣式，代碼比較繁複，難度也稍微難點。

使用JS引用不一樣的CSS值

根據不一樣瀏覽器：

<script type="text/javascript">

var version = navigator.userAgent;

if (version.indexOf("MSIE") > 1) {

document.write("<link href='ie.css' rel='stylesheet' type='text\/css'\/>");

} else if (version.indexOf("Chrome") > 1) {

document.write("<link href='chrome.css' rel='stylesheet' type='text\/css'\/>");

} else if (version.indexOf("Firefox") > 1) {

document.write("<link href='ff.css' rel='stylesheet' type='text\/css'\/>");

}

</script>

根據不一樣分辨率：

<script type="text/javascript">

if (screen.width == 1024){

document.write("<link href='css/css1.css' rel='stylesheet' type='text\/css'\/>");

}else {

document.write("<link href='css/css2.css' rel='stylesheet' type='text\/css'\/>");}

</script>