亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 29
粉絲 1
評(píng)論 0
訪問量 22120
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
三個(gè)視口與移動(dòng)端布局的理解
Pharaoh
原創(chuàng)
822人瀏覽過

三個(gè)視口

想要深入理解視口首先要知道什么是物理像素，什么是CSS像素/設(shè)備獨(dú)立像素（density-independent pixel）以及什么是設(shè)備像素比

  • 物理像素（physical pixel）一個(gè)像素是設(shè)備屏幕上最小的物理顯示單元，每個(gè)像素都有自己的顏色值和亮度，同一個(gè)設(shè)備它的物理像素是固定的，即它的分辨率是固定的

  • CSS像素/設(shè)備獨(dú)立像素（density-independent pixel）在iphone3上，CSS像素和設(shè)備的物理像素是相等的，隨著科技發(fā)展，手機(jī)的尺寸沒有太大的變化，但是屏幕的像素密度越來越大了，這意味著相同大小的屏幕上，像素多了1倍，如果還按照1：1顯示，就會(huì)很小，閱讀使用很不方便，所以在高像素密度的設(shè)備上，多個(gè)物理像素=1個(gè)CSS像素，這也是為什么手機(jī)物理像素是750，屏幕顯示的卻是375的原因，因?yàn)樵O(shè)備像素比是2，所以一個(gè)CSS像素=兩個(gè)物理像素

  • 設(shè)備像素比=物理像素/CSS像素，例如設(shè)備像素比（DPR）等于2，那么一個(gè)CSS像素 = 兩個(gè)物理像素，這樣就不會(huì)出現(xiàn)上面說的閱讀不方便的問題

以電腦的2K顯示器為例，windosw設(shè)置中的縮放與布局當(dāng)作設(shè)備像素比
如果我們不縮放，這個(gè)時(shí)候1個(gè)css像素就=1個(gè)物理像素，我的顯示器尺寸只有17寸，這樣瀏覽網(wǎng)站就很不方便，見下圖：


我們把設(shè)備像素比改為150%，也就是1.5，這個(gè)時(shí)候1個(gè)css像素=1.5個(gè)物理像素再來看：

明顯更方便閱讀了，這時(shí)可以理解為，我的屏幕物理像素還是2K，只不過我設(shè)置了設(shè)備像素比，CSS的1px = 顯示器的1.5px

視口

視口（viewport）就是瀏覽器顯示頁面內(nèi)容的屏幕區(qū)域。視口可以分為布局視口、視覺視口和理想視口

布局視口

面向開發(fā)者，可以看作是CSS布局時(shí)的畫布，一般默認(rèn)980px

視覺視口

終端設(shè)備看到的區(qū)域，如果布局視口大于視覺視口，用戶只能通過縮小，滑動(dòng)來觀看

理想視口

理想視口就是布局視口的寬度應(yīng)該與視覺視口的寬度一致。簡單理解就是設(shè)備有多寬，我們布局的視口就多寬

<meta>標(biāo)簽拓展：

  1. <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes"/>

width=device-width ：表示寬度是設(shè)備屏幕的寬度
initial-scale=1.0：表示初始的縮放比例
minimum-scale=0.5：表示最小的縮放比例
maximum-scale=2.0：表示最大的縮放比例
user-scalable=yes：表示用戶是否可以調(diào)整縮放比例

移動(dòng)布局

因?yàn)槭謾C(jī)樣式繁多，屏幕的分辨率各不相同，開發(fā)者需要讓頁面自適應(yīng)客戶終端的大小，所以我們不能用絕對(duì)值來開發(fā)頁面，用相對(duì)值是最好的解決辦法：

  1. 我們需要先把根元素的字號(hào)設(shè)置成相對(duì)值，布局的時(shí)候使用REM單位根據(jù)客戶設(shè)備像素大小來自適應(yīng)

  2. 重置主體元素的字號(hào)大小，以免根元素字號(hào)的大小影響到字體大小

代碼實(shí)例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>移動(dòng)布局</title>
  8.     <link rel="stylesheet" href="demo.css" />
  9.   </head>
  10.   <body>
  11.     <div class="header">
  12.       <ul>
  13.         <li><a href="">首頁</a></li>
  14.         <li><a href="">家居用品</a></li>
  15.         <li><a href="">男裝</a></li>
  16.         <li><a href="">女裝</a></li>
  17.         <li><a href="">家用電器</a></li>
  18.       </ul>
  19.     </div>
  21.     <div class="main">
  22.       <div class="content">
  23.         <div class="left">
  24.           <ul>
  25.             <li><a href="">廣告</a></li>
  26.             <li><a href="">廣告</a></li>
  27.             <li><a href="">廣告</a></li>
  28.             <li><a href="">廣告</a></li>
  29.           </ul>
  30.         </div>
  31.         <div class="middel">
  32.           <div>
  33.             <div><img src="phpkjkf.png" alt="" /></div>
  34.             <p>推薦產(chǎn)品</p>
  35.           </div>
  36.           <div>
  37.             <div><img src="phpkjkf.png" alt="" /></div>
  38.             <p>推薦產(chǎn)品</p>
  39.           </div>
  40.           <div>
  41.             <div><img src="phpkjkf.png" alt="" /></div>
  42.             <p>推薦產(chǎn)品</p>
  43.           </div>
  44.           <div>
  45.             <div><img src="phpkjkf.png" alt="" /></div>
  46.             <p>推薦產(chǎn)品</p>
  47.           </div>
  48.           <div>
  49.             <div><img src="phpkjkf.png" alt="" /></div>
  50.             <p>推薦產(chǎn)品</p>
  51.           </div>
  52.           <div>
  53.             <div><img src="phpkjkf.png" alt="" /></div>
  54.             <p>推薦產(chǎn)品</p>
  55.           </div>
  56.           <div>
  57.             <div><img src="phpkjkf.png" alt="" /></div>
  58.             <p>推薦產(chǎn)品</p>
  59.           </div>
  60.           <div>
  61.             <div><img src="phpkjkf.png" alt="" /></div>
  62.             <p>推薦產(chǎn)品</p>
  63.           </div>
  64.         </div>
  65.         <div class="right">
  66.           <ul>
  67.             <li><a href="">廣告</a></li>
  68.             <li><a href="">廣告</a></li>
  69.             <li><a href="">廣告</a></li>
  70.             <li><a href="">廣告</a></li>
  71.           </ul>
  72.         </div>
  73.       </div>
  74.     </div>
  75.   </body>
  76. </html>
  78. /* CSS文件 */
  79. * {
  80.   margin: 0;
  81.   padding: 0;
  82.   list-style: none;
  83.   text-decoration: none;
  84. }
  85. html {
  86.   /* 
  87.     100vw=設(shè)備獨(dú)立像素 
  88.     當(dāng)設(shè)備獨(dú)立像素=375的時(shí)候除以3.75
  89.     正好等于100px，方便布局計(jì)算
  90.     */
  91.   font-size: calc(100vw / 3.75);
  92. }
  93. body {
  94.   /* 重置字體大小，以免根元素的字號(hào)影響到字體 */
  95.   font-size: 0.16rem;
  96.   background-color: darkgray;
  97. }
  98. body .header ul {
  99.   height: 0.4rem;
  100.   display: flex;
  101.   justify-content: space-around;
  102.   align-items: center;
  103.   background-color: rgb(255, 255, 255);
  104. }
  105. body .header ul li a {
  106.   color: black;
  107. }
  109. body .main .content {
  110.   width: 3.75rem;
  111.   display: flex;
  112.   margin: auto;
  113.   justify-content: center;
  114. }
  115. body .main .content .middel {
  116.   width: 2.4rem;
  117.   height: 1.2rem;
  118.   display: grid;
  119.   grid-template-columns: repeat(4, 0.6rem);
  120.   grid-template-rows: 0.6rem;
  121. }
  122. body .main .content .left ul,
  123. body .main .content .right ul {
  124.   width: 0.4rem;
  125.   height: 1rem;
  126.   font-size: 0.1rem;
  127.   background-color: coral;
  128. }
  129. body .main .content .middel > div {
  130.   width: 0.6rem;
  131.   height: 0.6rem;
  132.   display: flex;
  133.   flex-direction: column;
  134.   align-items: center;
  135.   justify-content: center;
  136. }
  138. body .main .content .middel > div > div {
  139.   width: 50%;
  140.   height: 50%;
  141. }
  143. body .main .content .middel div img {
  144.   width: 100%;
  145. }
  147. body .main .content .middel div p {
  148.   font-size: 0.1rem;
  149. }
  151. body .main .content .left,
  152. body .main .content .right {
  153.   display: none;
  154. }
  155. /* 設(shè)備寬度大于500px的時(shí)候彈出廣告欄 */
  156. @media (min-width: 500px) {
  157.   body .main .content .left,
  158.   body .main .content .right {
  159.     display: block;
  160.   }
  161. }
  162. /* 限制字體到20px左右就要限制 */
  163. @media (min-width: 470px) {
  164.   html {
  165.     font-size: 125px;
  166.   }
  167. }
  169. /* 限制字體最小像素，以免用戶看不清楚 */
  170. @media (max-width: 250px) {
  171.   html {
  172.     font-size: 87.5px;
  173.   }
  174. }
批改老師：PHPzPHPz

批改狀態(tài)：合格

老師批語：
本博文版權(quán)歸博主所有，轉(zhuǎn)載請(qǐng)注明地址！如有侵權(quán)、違法，請(qǐng)聯(lián)系admin@php.cn舉報(bào)處理！
全部評(píng)論 文明上網(wǎng)理性發(fā)言，請(qǐng)遵守新聞評(píng)論服務(wù)協(xié)議
0條評(píng)論
作者最新博文
關(guān)于我們 免責(zé)申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長！
關(guān)注服務(wù)號(hào) 技術(shù)交流群
PHP中文網(wǎng)訂閱號(hào)
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時(shí)隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號(hào)
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學(xué)習(xí)！
    全站2000+教程免費(fèi)學(xué)