1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>像素</title> 6 <style> 7 8 .box1{ 9 width: 200px; 10 height: 200px; 11 background-color: #bfa; 12 } 13 14 </style> 15 </head> 16 <body> 17 <div class="box1">我是div</div> 18 <!-- 19 像素（px） 20 - 屏幕是由一個一個發光的小點構成的，每個小點都是一個像素 21 - 以上的概念中的像素屬於 “物理像素” 22 - 在編寫網頁時我們所使用的像素，稱為“CSS像素” 23 - 我們所使用的CSS像素最終顯示時，都會被瀏覽器轉換為物理像素 24 有時候是1個CSS像素轉換為1個物理像素 （1:1） 25 而有時候是1個CSS像素 轉換為多個物理像素（1:多） 26 27 - 設備分辨率的查詢網站 28 https://material.io/resources/devices/ 29 30 - 分辨率 31 - 顯示面積相同，分辨率越高，像素點就越小 32 14寸 1366 x 768 33 14寸 1920 x 1080 34 35 iphone6 4.7寸 750 x 1334 視口默認寬度980px CSS像素和物理像素比：980:750 36 6plus 5.5寸 1080 x 1920 37 - 所以在移動設備中，像素都是非常非常小的（視網膜屏） 38 39 一個pc端的網站，如何在移動端呈現的呢？ 40 - 當通過移動設備去訪問一個網頁時， 41 為了可以完整的將網頁呈現， 42 移動設備通常會將視口大小設置為980px（CSS像素） 43 如果網頁的寬度大於980px，移動端瀏覽器為了完整的呈現網頁 44 會對網頁進行縮放，使網頁可以完整顯示 45 46 - 由於pc端的網站在移動端呈現時，實際的像素比都在1:0.6以下, 47 同時由於移動設備的像素本來就很小，這樣就導致pc端頁面在 48 移動設備中呈現時會有一個非常非常不好效果 49 50 - 如何確保網頁在移動端中有一個比較好的瀏覽效果呢？ 51 52 53 54 --> 55 </body> 56 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <!-- 可以通過meta標簽來設置視口的大小 --> 6 <!-- 可以通過修改視口的大小來改變像素比 7 以iphone6 為例，視口大小如果設置375px 8 它的物理像素是 750px 9 像素比 375:750 = 1:2 10 11 每一部手機都會存在一個最佳的像素比， 12 當它像素比處在該值時，會有一個最佳的瀏覽效果 13 但是由於機型不同，這個像素比例也不同 14 比如：iPhone6的最佳像素比 1:2 15 16 將手機的像素比設置為最佳像素比的視口大小，稱為完美視口 17 所以我們編寫移動端的頁面時第一件事就是要設置瀏覽器的完美視口 18 19 視口的設置只會影響移動設備，不會在pc端起作用 20 --> 21 <!-- <meta name="viewport" content="width=device-width"> --> 22 <!-- 23 meta:vp + table 自動生成完美視口 24 --> 25 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 26 27 <title></title> 28 <style> 29 *{ 30 margin: 0; 31 padding: 0; 32 } 33 .box1{ 34 width: 375px; 35 height: 200px; 36 background-color: #bfa; 37 } 38 39 </style> 40 </head> 41 <body> 42 43 <div class="box1"></div> 44 <!-- 45 像素 46 1.像素分為兩種物理像素和CSS像素 47 2.不同的設備中物理像素的大小也不相同 48 3.CSS像素和物理像素存在一定的比例 49 4.移動端默認的視口大小為980像素（CSS像素） 50 5.PC端頁面在移動設備顯示的效果不好 51 原因是默認的相比太低了 52 53 解決移動端的頁面問題 54 1.PC端的網頁不適合在移動端顯示（內容太多） 55 2.如果要在移動端有一個比較好顯示效果， 56 必須要修改CSS像素和物理像素的比例 57 58 像素比是由什么決定的？ 59 像素比：視口寬度 : 設備物理像素 60 980 750 61 980 1080 62 63 需要將視口的寬度調小，以改變像素比 64 --> 65 </body> 66 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>移動端的適配</title> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 8 <style> 9 *{ 10 margin: 0; 11 padding: 0; 12 } 13 14 html{ 15 /* 設置html的font-size */ 16 font-size: 0.13333vw; 17 18 /* 19 有這么一個單位，1個它就等於1個html的font-size 20 1rem = 1 html的font-size 21 */ 22 } 23 24 .box1{ 25 /* 26 由於不同設備的視口大小不同， 27 375px在不同的移動設備中所代表的意義也不同 28 比如： 29 在iphone6中，視口大小為375px，所以375px就是全屏的狀態 30 在iphone6 plus 視口大小為414px，所以375px會比全屏小一點 31 在iphone5中，視口大小為320px，所以375px會超出屏幕，出現水平滾動條 32 在寫移動時，像素這個單位就基本上不能用了 33 34 1vw = 1%視口寬度 35 36 vw的參照物永遠都是視口 37 38 以750的設計圖為例 39 100vw 相當於 750px 40 41 100vw --> 750px 42 0.13333vw --> 1px 43 6.53333vw --> 49px 44 4.66666vw --> 35px 45 46 將 html 的字體大小 設置為 font-size: 0.13333vw; 47 這樣意味着 1rem = 0.13333vw 48 49 1rem = 1font-size(html) 50 1font-size(html) = 0.13333vw 51 1rem = 0.13333vw 52 0.13333vw = 1px(設計圖) 53 1rem = 1px(設計圖) 54 55 56 49px * 35px 的元素 57 */ 58 width: 6.53333vw; 59 height: 4.66666vw; 60 background-color: #bfa; 61 } 62 63 64 .box2{ 65 /* 328 * 105 */ 66 width: 328rem; 67 height: 105rem; 68 background-color: pink; 69 } 70 </style> 71 </head> 72 <body> 73 74 <div class="box1"> 75 76 77 78 </div> 79 80 <div class="box2"></div> 81 </body> 82 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <style> 8 9 *{ 10 margin: 0; 11 padding: 0; 12 } 13 14 html{ 15 /* 16 如果font-size不夠12px，在老版本的chrome中會被重置為12px 17 導致適配失敗，必須要確保值要大於12px 18 將vw值擴大40倍，得到5.333333 19 20 由於在這里我們給font-size擴大了40倍， 21 所以在使用rem，必須要讓像素除以40 22 */ 23 font-size: 5.33333vw; 24 } 25 /* 26 在Chrome中，字體的大小最小0 表示沒有， 27 可顯示的字體最小是12px，所以1-11px顯示效果是一樣的 28 目前新版本的Chrome不會因為字體大小的問題影響到適配 29 30 但是老版本Chrome，和一些移動端瀏覽器， 31 會存在字體大小不能設置為12px以下的問題 32 在這些瀏覽器如果將字體大小設置為12px以下時，瀏覽器會自動將其重置為12px 33 34 */ 35 .box1{ 36 width: 18.75rem; 37 height: 100px; 38 background-color: #bfa; 39 40 } 41 42 </style> 43 </head> 44 <body> 45 46 <div class="box1"> 47 我是一行文字 48 </div> 49 50 </body> 51 </html>