手機端網頁開發的兩個重要設定

2021-09-07 20:54:32 字數 1240 閱讀 9937

以@開頭的css語法稱為查詢,css3引入了@media查詢。css其實就是通過選擇器決定何時啟用一些屬性配置。這種思想不僅僅可以用在介面上,也可以用在工程設計上。例如有許多種操作,命中不同規則時啟用不同的操作;有許多種配置,在不同環境下啟用不同的配置。@media就是用來在不同介面環境下啟用不同的配置。

先舉個例子:當螢幕寬度小於300畫素時,背景色為淺藍色。

@media screen and (max-width: 300px) 

}

使用 @media 查詢,可以針對不同的**型別定義不同的樣式。其中**型別包括:印表機、螢幕裝置、語音裝置三種。我們只需要關注螢幕裝置即可。

@media 可以針對不同的螢幕尺寸設定不同的樣式。當你重置瀏覽器大小的過程中,頁面也會根據瀏覽器的寬度和高度重新渲染頁面。

css 語法

@media mediatype and|not|only (media feature)
你也可以針對不同的**使用不同 stylesheets :

media支援的裝置型別現在有效的只有三種,其它的都已經廢棄了。

resolution 定義裝置的解析度。如:96dpi, 300dpi, 118dpcm

max-resolution 定義裝置的最大解析度。

min-resolution 定義裝置的最小解析度。

max-monochrome 定義在乙個單色框架緩衝區中每畫素包含的最大單色原件個數。

min-monochrome 定義在乙個單色框架緩衝區中每畫素包含的最小單色原件個數

monochrome 定義在乙個單色框架緩衝區中每畫素包含的單色原件個數。如果不是單色裝置,則值等於0

orientation 定義輸出裝置中的頁面可見區域高度是否大於或等於寬度。

scan 定義電視類裝置的掃瞄工序。

grid 用來查詢輸出裝置是否使用柵格或點陣。

viewport 是使用者網頁的可視區域。

viewport 翻譯為中文可以叫做"視區"。

手機瀏覽器是把頁面放在乙個虛擬的"視窗"(viewport)中,通常這個虛擬的"視窗"(viewport)比螢幕寬,這樣就不用把每個網頁擠到很小的視窗中(這樣會破壞沒有針對手機瀏覽器優化的網頁的布局),使用者需要通過平移和縮放來看網頁的不同部分。

乙個常用的針對移動網頁優化過的頁面的 viewport meta 標籤大致如下:

兩個重要函式的介紹

基本原理是利用函式 findhomography,該 函式是求兩幅影象的單應性矩陣或者叫 單對映矩陣 它是乙個3 3的矩陣。findhomography 計算多個二維點對之間的最優單對映變換矩陣 h 3行x3列 使用最小均方誤差或者ransac方法 單應性矩陣算過後的投影點的偏移量 scene co...

有關並行的兩個重要定律

使用並行程式處於兩個目的。第一,為了獲得更好的效能 第二,由於業務模型的需要,確實需要多個執行實體。一 amdahl定律 amdahl定律是電腦科學中非常重要的定律。它定義了序列系統並行化後的加速比的計算公式和理論上限。加速比定義 加速比 優化前系統耗時 優化後系統耗時 即,所謂加速比,就是優化前的...

Hadoop 中 最重要的兩個模組

hadoop 中 最重要的兩個模組 hdfs 分布式的檔案系統 主節點 namenode secondarynamenode resourcemanager 從節點 datanode nodemanager mapreduce 分布式的平行計算框架 job.submit job.waitforcom...