HTML視口相關的設定

2021-10-05 03:11:47 字數 1040 閱讀 1833

視口在響應式設計中是乙個非常重要的概念。視口的概念針對移動端瀏覽器，分為兩種視口，一種是可見視口即裝置大小，另一種是視窗視口即網頁寬度

html5中，標籤可以用於配置視口屬性。

"viewport" content="user-scalable=no, width=device-width initial-scale=


1.0， maximum-scale=


1.0>
在css3規範中，**查詢可以根據視口寬度、裝置方向等差異來改變頁面的顯示方式。**查詢由**型別和條件表示式組成，示例**如下所示：

@media screen and（max-width：960px )
它表示**型別為 screen並且螢幕寬度小於等於960px時的樣式。

le8既不支援html5也不支援css3 media，所以我們需要載入兩個js檔案，來保證我們的**實現相容效果：

<--


[ifte9]


>


scriptsrc=


"">


<


/script>


scriptsrc=


"">


<


/script>


<


![endif]--


>
傳統的確定斷點的方案是使用一些固定的寬度進行劃分，如320px（ iphone）768px（ipad），960px或1024px（傳統pc瀏覽器），這種方案的好處是很好照顧到了當前主流的裝置，但是技術發展實現是太快了，各種不同解析度的裝置層出不窮比如一些手機尺寸接近平板，一些平板尺寸比電腦更大等等，很難保證未來能很好的支援各種裝置。另外一種確定斷點的方法是根據內容進行設定斷點以及設定多少個斷點。隨著各種尺寸裝置的出現，斷點命名採用更為通用的方式，而不是用裝置來命名更為合適

其實固定布局（以畫素為單位）可以換算為百分比寬度，來實現百分比布局換算公式為：

目標元素寬度/父盒子寬度=百分數寬度父盒子寬度

aside ——> aside *父盒子寬度500px

html響應式設計視口 視窗視口

關於視口 視口在響應式設計中是乙個非常重要的概念，在移動端瀏覽器中存在兩種視口 一是可見視口，即裝置大小 另外一種是視窗視口，即網頁寬度。裝置螢幕是414pxd 寬度，在瀏覽器中，414px的螢幕能夠顯示1200px 的內容。那麼，414px 就是可見視口的寬度，而1200px 就是視窗視口的寬度。...

glViewport 設定視口

c語言描述 void glviewport glint x,glint y,glsizei width,glsizei height 引數x,y 指定視口矩形的左下角座標,單位為畫素.預設值為 0,0 width,height 指定視口矩形的寬度和高度.說明glviewport函式指定x和y從單位裝...

CSS viewport視口及設定

一 viewport視口 在移動端，viewport視口就是瀏覽器顯示頁面內容的螢幕區域。viewport視口有兩種視口，分別是 visual viewport 可視視口 和layout viewport 布局視口 1 visual viewport固定大小跟螢幕大小相同，在上面 2 layout ...