整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          前端開發尺寸單位說明

          前端開發尺寸單位說明

          端開發中的尺寸單位中,常見的包括像素(px)、相對單位(rem、em)、視窗單位(vw、vh)等。除了上述單位外,還有百分比、物理單位、字符寬度、最大最小寬度(高度)等設置;

          1. 像素(px)
            • 像素是屏幕上最小的可顯示元素。
            • 通常用于固定大小的元素,如圖片或邊框。
            • 在響應式設計中,使用px可能導致在不同屏幕尺寸上顯示效果不一致。
          1. 相對單位(rem、em)
            • 相對單位是相對于父元素或根元素的大小來計算的。
            • rem(root em)是相對于根元素的字體大小。例如,如果根元素的字體大小是16px,1rem將等于16px。
            • em是相對于父元素的字體大小。如果父元素字體大小是12px,1em將等于12px。
          1. 視窗單位(vw、vh)
            • 視窗單位是相對于視窗(瀏覽器窗口)的大小來計算的。
            • vw(視窗寬度)是相對于視窗寬度的百分比。例如,10vw將等于視窗寬度的10%。
            • vh(視窗高度)是相對于視窗高度的百分比。例如,5vh將等于視窗高度的5%。
            • 視窗單位通常用于創建響應式設計,使元素根據視窗的大小自動調整大小。
          1. 視口寬度(vm)
            • 視口寬度單位是相對于視口寬度的百分比。
            • 1vm等于視口寬度的1%。
          1. 百分比(%)
            • 百分比是相對于父元素的某個屬性的百分比值。
            • 例如,設置寬度為50%表示元素的寬度是父元素寬度的50%。
          1. 物理單位(in、cm、mm)
            • 這些單位表示物理尺寸,如英寸(inches)、厘米(centimeters)和毫米(millimeters)。
            • 這些單位在打印樣式表和打印頁面時可能更有用。
          1. 字符寬度(ch)
            • ch 表示 "0"(零)字符的寬度,通常用于根據字符數量設置元素的寬度。
          1. 最小寬度/最大寬度(min-width、max-width)
            • 這些屬性允許您設置元素的最小和最大寬度,以適應不同的屏幕尺寸。
          1. 最小高度/最大高度(min-height、max-height)
            • 類似于最小寬度和最大寬度,這些屬性允許您設置元素的最小和最大高度。
          1. 自動(auto)
          • 在某些屬性中,可以使用 "auto" 關鍵字,表示由瀏覽器自動計算尺寸,通常用于自適應布局。

          使用這些單位可以使前端開發更加靈活和適應不同的設備和屏幕尺寸。選擇合適的單位取決于具體的設計和布局需求。

          這些尺寸單位和屬性可以根據具體的設計需求和布局要求進行選擇和組合,以實現靈活、響應式的界面設計。

          家好,我是Echa。

          最近有不少的粉絲老鐵們私信我為啥這幾天沒有創作新內容了,實在對不住。小編我身在廣州中招羊了,我在最近一篇文章也有提到過,今天是第四天,基本上康復了,奧密克戎BA.5其實沒有那么恐怖,中招了前三天特難受,熬過來了就沒事了,大家莫慌。現在小編就可以認認真真的繼續創作內容了。同時也非常感謝大家默默的關心我小編身體狀況,非常謝謝。

          創作不易,喜歡的老鐵們加個關注,點個贊,后面會持續更新干貨,速速收藏,謝謝!

          說起 CSS 單位,我們最常用的可能就是像素單位(px),它是一個絕對單位,也就是說一個10px的文字,放在哪里都是一樣大的。單位可以影響顏色、距離、尺寸等一系列的屬性。CSS中單位的形式有很多種,下面就來學習一下 CSS 中單位!

          1. 相對單位

          相對單位就是相對于另一個長度的長度。CSS中的相對單位主要分為兩大類:

          • 字體相對單位,他們都是根據font-size來進行計算的。常見的字體相對單位有:em、rem、ex、ch;
          • 視窗相對單位,他們都是根據視窗大小來決定的。常見的視窗相對單位有vw、vh、vmax、vmin。

          下面就來看看這些常見的CSS單位。

          (1)em 和 rem

          em是最常見的相對長度單位,適合基于特定的字號進行排版。根據CSS的規定,1em 等于元素的font-size屬性的值。

          em 是相對于父元素的字體大小進行計算的。如果當前對行內文本的字體尺寸未進行顯示設置,則相對于瀏覽器的默認字體尺寸。當DOM元素嵌套加深時,并且同時給很多層級顯式的設置了font-size的值的單位是em,那么就需要層層計算,復雜度會很高。

          當然,上面的這個說法是不嚴謹 的。來看一個例子:

          <!DOCTYPE html>
          <html lang="en">
          <head>
              <meta charset="UTF-8">
              <title>Document</title>
              <style>
                  .parent {
                      width: 300px;
                      height: 300px;
                      font-size: 20px;
                  }
                  .child {
                      border: 1em solid ;
                  }
              </style>
          </head>
          <body>
              <div class="parent">
                  <div class="child">
                     子元素
                  </div>
              </div>
          </body>
          </html>
          
          

          這里給父元素設置了字體大小為20px,然后給子元素的border寬度設置為1em,這時,子元素的border值為20px,確實是相對于父元素的字體大小設置的:

          那如果我們給子元素的字體設置為30px:

          .child {
            font-size: 30px;
            border: 1em solid ;
          }
          

          這時可以看到,子元素的邊框寬度就是30px,它是相對自己大小進行計算的:

          所以,可以得出結論:如果自身元素是沒有設置字體大小的,那么就會根據其父元素的字體大小作為參照去計算,如果元素本身已經設置了字體,那么就會基于自身的字體大小進行計算

          em單位除了可以作用于 font-size之外,還可以運用于其他使用長度的屬性,比如border-width、width、height、margin、padding、text-shadow等。

          所以,em的使用還是比較復雜的,它可能會繼承任意一級父元素的字體大小。需要謹慎使用。

          rem相對于em就簡單了很多,它是根據頁面的根元素(根元素)的字體大小來計算的。來對上面的例子進行修改:

          .child {
            font-size: 30px;
            border: 1rem solid ;
          }
          
          html {
           font-size: 25px;
          }
          

          效果如下,可以看到,邊框的長度變成了25px,它是根據根元素html的字體大小計算的:

          如果沒有對根元素設定字號的話,font-size: 1rem的作用與font-size: initial相同。

          使用 em 和 rem 可以讓我們靈活的夠控制元素整體的放大和縮小,而不是固定大小。那何時應使用 em,何時應使用 rem 呢?可以根據兩者的差異來進行選擇:

          • 兩者在客戶端中計算出來的樣式都會以px的形式顯示;
          • rem是相對于根元素html的font-size計算,em 相對于元素的font-size計算;
          • 當需要根據瀏覽器的font-size設置縮放時,應該使用 rem;
          • 使用 em 應該根據組件的font-size來定,而不是根元素的font-size來定;
          • rem 可以從瀏覽器字體設置中繼承 font-size 值, em 可能受任何繼承過來的父元素 font-size 的影響。

          (2)ex 和 ch

          ex 和 ch 都是排版用的單位,它們的大小取決于元素的font-size 和 font-family屬性。

          • ex 指的是所用字體中小寫字母 x 的高度。因此,如果兩個字體不一樣,那么 ex 的值是不一樣的。因為每種字體的小寫 x 的高度是不一樣的。
          • ch 和 ex 類似,不過它是基于數字 0 的寬度計算的。會隨著字體的變化而變化。而0 的寬度通常是對字體的平均字符寬度,它是一個估計值。由于 ch 是一個近似等寬的單元,所以在設置容器的寬度時很有用,比如一個容器想要顯示指定個數的字符串時,就可以使用這個單位。

          (3)vw、vh、vmax 和 vmin

          這四個單位都是視窗單位,所謂的視窗,在web端指的就是可視區域,移動端的視窗指的就是布局視窗。如果視窗大小發生了變化,那么這些值都會隨之變化。這四個單位指的是:

          • vw:視窗寬度的百分比;
          • vh:視窗高度的百分比;
          • vmax:較大的 vh 和 vw;
          • vmin:較小的 vh 和 vw。

          假如一個瀏覽器的高度是800px,那么1vh的值就是8px。vh和vw的大小總是和視窗的高度和寬度有關。

          vmin 和 vmax 與視窗寬度和高度的最大值和最小值有關。假如一個瀏覽器高度為500px,寬度為1200px,那么1vmin就是5px,1vmax就是12px。

          這些單位都是長度單位,所以可以在任何允許使用長度單位的地方使用。這些單位比較適合用于創建全視區界面,例如移動設備的界面,因為元素是根據視區的尺寸而變化的,與文檔樹中的任何元素都沒有關系。

          2. 絕對單位

          在 CSS 中,絕對單位包括:px 、pt 、pc、 cm 、 mm 、in 等。絕對單位是一個固定的值,它反應了一個真實的物理尺寸。它不會受屏幕大小或者字體的影響。它們的大小取決于值以及屏幕的分辨率(DPI,每英寸的點數)。px就是我們最常用的絕對單位之一。這些絕對單位的換算關系如下:

          1in=25.4mm=2.54cm=6pc=72pt=96px
          

          (1)px

          px 全稱為 Pixels,表示像素,它并不嚴格等于顯示器的像素,尤其在高清屏下。盡管CSS單位會根據瀏覽器、操作系統或者硬件適當縮放,在某些設備或者用戶的分辨率設置下也會發生變化,但是96px通常等于一個物理英寸的大小。

          CSS 將光柵圖像(如照片等)的顯示方式定義為默認每一個圖像大小為1px。一個“600x400”解析度的照片的長寬分別為“600px”和“400px”,所以照片本身的像素并不會與顯示裝置像素一致,而是與 px 單位一致。如此就可以將圖像完整的與網頁的其它元素排列起來。

          很多時候, px 也常被稱為 CSS 像素。它是一個絕對單位,但也可以被視為相對單位,因為像素單位相對的是設備像素。在同一個設備上,每 1 個 CSS 像素所代表的物理像素是可以變化的;在不同的設備之間,每 1 個 CSS 像素所代表的物理像素是可以變化的。

          .box {
              width: 100px;
              height: 100px;
          }
          

          (2)pt

          pt 全稱為 Point,表示點。常用于軟件設計和排版印刷行業(筆者做的前端系統,最終的產物就是一個需要拿去印刷的PDF,所以會經常用到這個單位)。當使用這個單位時,無論顯示器的分辨率是多少,打印在紙上的結果都是一樣的。

          如果單純為了網頁的顯示,建議就使用px像素單位,如果需要輸出印刷產品,就可以考慮使用pt。

          (3)pc

          pc 全程為 Picas,表示派卡。相當于我國新四號鉛字的尺寸。派卡也是印刷的術語,1派卡等于12點。它和 px 的換算關系如下:

          1pc=16px
          

          (4)cm

          cm 全稱為 Centimeters,表示厘米。它和 px 的換算關系如下:

          1cm=37.8px
          

          (5)mm

          mm 全稱為 Millimeters,表示毫米。它和 px 的換算關系如下:

          1mm=3.78px
          

          (6)in

          in 全稱為 Inches,表示英寸。它和 px 的換算關系如下:

          1in=96px
          

          3. 頻率單位

          CSS中的頻率單位有兩個:赫茲(Hz)和千赫茲(kHz)。它們的換算關系如下:

          1kHz=1000Hz
          

          通常情況下,頻率單位使用在聽或說級聯樣式表中。頻率可以被用來改變一個語音閱讀文本的音調。低頻率就是低音,高頻率就是高音。

          .low { 
            pitch: 105Hz; 
          } 
          
          .squeal { 
            pitch: 135Hz; 
          }
          

          需要注意,當數值為0時,單位對值沒有影響,但是單位是不能省略的。也就是說0、0Hz、0kHz是不一樣的。所以,在使用頻率單位時,不要直接寫0。另外,這兩個單位是不區分大小寫的。

          4. 時間單位

          CSS中的時間單位有兩個:秒(s)和毫秒(ms)。這兩個時間單位都是CSS新增的單位。這兩個單位的換算關系如下:

          1s=1000ms
          

          時間單位主要用于過度和動畫中,用于定義持續時間或延遲時間。下面兩種定義是等效的:

          a[href] {
           transition-duration: 2.5s;
          }
          
          a[href] {
           transition-duration: 2500s;
          }
          

          5. 分辨率單位

          CSS中的分辨率單位有三個:dpi、dpcm、dppx。這三個單位都是CSS3中華新增的單位。他們都是正值,不允許為負值。這三個單位的換算關系如下:

          1dppx=96dpi
          1dpi ≈ 0.39dpcm
          1dpcm ≈ 2.54dpi
          

          分辨率單位主要用于媒體查詢等操作。

          (1)dpi

          dpi 全稱為 dots per inch,表示每英寸包含的點的數量。普通屏幕通常包含 72或96個點,大于 192dpi 的屏幕被稱為高分屏。

          
          @media screen and (min-resolution: 96dpi) { ... }
          @media print and (min-resolution: 300dpi) { ... }
          

          (2)dpcm

          dpcm 全稱為 dots per centimeter,表示每厘米包含的點的數量。

          @media screen and (min-resolution: 28dpcm) { ... }
          @media print and (min-resolution: 118dpcm) { ... }
          

          (3)dppx

          dppx 全稱為 dots per pixel,表示每像素(px)包含點的數量。由于CSS px的固定比率為1:96,因此1dppx相當于96dpi。它對應于由圖像分辨率定義的CSS中顯示的圖像的默認分辨率。

          @media screen and (min-resolution: 2dppx) { ... }
          @media screen and (min-resolution: 1dppx) and (max-resolution: 1.9dppx) { ... }
          

          6. 角度單位

          CSS中的角度單位有四個:deg、grad、rad、turn。這些角度單位都是CSS3中新增的單位。它們的換算關系如下:

          90deg=100grad=0.25turn ≈ 1.570796326794897rad
          

          一般這些角度單位用于元素的旋轉操作,包括2D旋轉、3D旋轉等。

          • 當旋轉值為正值時,元素會順時針旋轉;
          • 當旋轉值為負值時,元素會逆時針旋轉。


          通常情況下,一個完整的旋轉就是360度。所以,所有的角度都在0-360度之間。但是,超出這個范圍的值也是允許的,只不過都會歸到0-360度之間。比如,順時針旋轉420度(450deg)、逆時針旋轉270度(-270deg)、順時針旋轉90度(90deg)都是一樣的效果,都會歸為90deg。但是當使用動畫時,這些角度值就非常重要了。

          CSS的旋轉主要依賴于 transform 屬性中的 rotate() 、rotate3d、 skew() 等方法。只需給它們傳遞旋轉的角度即可。

          除了旋轉會使用角度之外,線性漸變也會經常使用角度值:

          background: linear-gradient(45deg, #000, #fff);
          

          (1)deg

          deg 全稱為 Degress,表示度,一個圓總共360度。

          transform: rotate(2deg);
          

          (2)grad

          grad 全稱為 Gradians,表示梯度,一個圓總共400梯度。

          transform: rotate(2grad);
          

          (4)rad

          rad 全稱為 Radians,表示弧度,一個圓總共2π弧度。

          transform: rotate(2rad);
          

          (4)turn

          turn 全稱為 Turns,表示圈(轉),一個圓總共一圈(轉)。

          transform:rotate(.5turn);
          

          7. 百分比單位

          百分比(%)也是我們比較常用的單位之一,所有接受長度值的屬性都可以使用百分比單位。但是不同屬性使用該單位的效果可能并不一樣。但是都需要有一個參照值,也就是說百分比值是一個相對的值。

          下面來看看常見場景中的百分比單位的使用。

          (1)盒模型中的百分比

          在CSS中的盒模型包含的屬性有:width、max-width、min-width、height、max-height、min-height、padding、margin等。這些屬性在使用百分比時,參照物不盡相同:

          • width、max-width、min-width:值為百分比時,其相對于包含塊的 width 進行計算;
          • height、max-height、min-height:值為百分比時,其相對于包含塊的 height 進行計算;
          • padding、margin:值為百分比時,如果是水平的值,就是相對于包含塊的 width 進行計算;如果是垂直的值,就是相對于包含塊的 height 進行計算。

          (2)文本中的百分比

          在CSS中文本控制的屬性有font-size、line-height 、vertical-align、 text-indent等。這些屬性在使用百分比時,參照物不盡相同:

          • font-size:根據父元素的font-size 進行計算;
          • line-height:根據font-size進行計算;
          • vertical-align:根據line-height進行計算;
          • text-indent:如果是水平的,則根據width進行計算,如果是垂直的,則根據 height 進行計算。

          (3)定位中的百分比

          在CSS中用控制 position 位置的top、right、bottom、left都可以使用百分比作為單位。其參照物就是包含塊的同方向的width和height。不同定位的包含塊不盡相同:

          • 如果元素為靜態( static )或相對定位( relative ),包含塊一般是其父容器;
          • 如果元素為絕對定位( absolute ),包含塊應該是離它最近的 position 為 absolute 、 relative 或 fixed 的祖先元素;
          • 如果元素為固定定位( fixed ),包含塊就是視窗( viewport )。

          (4)變換中的百分比

          CSS 中的 transform 屬性中的 translate 和 transform-origin 值也可以設置百分比。

          • translateX() 根據容器的 width 計算
          • translateY() 根據容器的 height 計算
          • transform-origin 中橫坐標( x )相對于容器的 width 計算;縱坐標( y )相對于容器的 height 計算

          注意,在 translate 還有一個 z 軸的函數 translateZ() 。它是不接受百分比為單位的值。

          、認識網頁

          我們日常見到的網頁主要由文字、圖像和超鏈接等元素構成。當然,除了這些元素,網頁中還可以包含音頻、視頻以及Flash等。

          代碼是如何形成網頁的呢? 那就需要瀏覽器引擎進行解析渲染了。

          二、常見瀏覽器介紹

          瀏覽器是網頁運行的平臺,常用的瀏覽器有:

          • IE
          • 火狐(Firefox)
          • 谷歌(Chrome)
          • Edge
          • Safari
          • Opera

          2.1 瀏覽器占有的市場份額

          根據市場調查機構 Statcounter 最新公布的數據,2023 年 11 月全球桌面瀏覽器市場份額排名前三名分別是谷歌 Chrome(62.06%)、蘋果 Safari(13.3%)和 Edge 瀏覽器(5.5%)。雖然 Edge 瀏覽器在全球范圍內均有分布,但其份額仍無法超過 Safari 瀏覽器。與上月相比,Chrome 的份額下降了 0.25 個百分點,Safari 的份額增加了 0.07 個百分點。Firefox 在該月的全球份額達到 3.24%,相比上月增長了 0.22 個百分點。

          在桌面端瀏覽器市場中,Chrome 繼續穩居第一,市場份額為 62.06%,盡管有所下降但也屬于正常波動范圍。Safari 以 13.3% 的份額緊隨其后,在全球范圍內享有較高的知名度。Edge 的市場份額從上月的 11.8% 下降到 11.23%,仍然保持著良好的增長趨勢。

          此外,Firefox 的全球份額也有所上升,達到 6.69%,與其他瀏覽器相比表現強勁。Opera、360 安全瀏覽器、IE 等其他瀏覽器也在全球范圍內占有一定的市場份額。

          總體而言,在桌面瀏覽器市場上,Chrome 繼續保持著領先地位,而 Safari 和 Edge 則在市場上展開了激烈的競爭。預計在未來幾個月內,這些產品將繼續保持穩定的增長態勢,并且會繼續影響著用戶的使用習慣和技術趨勢。

          2.2 瀏覽器內核(理解)

          瀏覽器內核又可以分成兩部分:【渲染引擎】(layout engineer 或者 Rendering Engine) 和 【JS 引擎】。

          • 渲染引擎:它負責取得網頁的內容(HTML、XML、圖像等等)、整理訊息(例如加入 CSS 等),以及計算網頁的顯示方式,然后會輸出至顯示器或打印機。瀏覽器的內核的不同對于網頁的語法解釋會有不同,所以渲染的效果也不相同。
          • JS 引擎:解析 Javascript 語言,執行 javascript語言來實現網頁的動態效果。

          2.3 常見的渲染引擎

          內核通常只指渲染引擎:

          最開始渲染引擎和 JS 引擎并沒有區分的很明確,后來【JS 引擎越來越獨立,內核就傾向于只指渲染引擎】。有一個網頁標準計劃小組制作了一個 ACID 來測試引擎的兼容性和性能。內核的種類很多,如加上沒什么人使用的非商業的免費內核,可能會有10多種,但是常見的瀏覽器內核可以分這四種:Trident、Gecko、Blink、Webkit。

          (1)Trident(IE內核)

          Trident [?tra?dn:t]:n. 三叉戟

          國內很多的雙核瀏覽器的其中一核便是 Trident,美其名曰 "兼容模式"。

          代表: IE、傲游、世界之窗瀏覽器、Avant、騰訊TT、獵豹安全瀏覽器、360極速瀏覽器、百度瀏覽器等(這些國產瀏覽器都是雙內核)。

          Window10 發布后,IE 將其內置瀏覽器命名為 Edge,Edge 最顯著的特點就是新內核 EdgeHTML。

          (2)Gecko(firefox)

          Gecko [?geko?] n. 壁虎

          Gecko(Firefox 內核): Mozilla FireFox(火狐瀏覽器) 采用該(渲染引擎),Gecko 的特點是代碼完全公開,因此,其可開發程度很高,全世界的程序員都可以為其編寫代碼,增加功能。 可惜這幾年已經沒落了, 比如 打開速度慢、升級頻繁、豬一樣的隊友flash、神一樣的對手chrome。

          (3)webkit(Safari)

          Safari 是蘋果公司開發的瀏覽器,所用瀏覽器內核(渲染引擎)的名稱是大名鼎鼎的開源引擎 WebKit。

          現在很多人錯誤地把 webkit 叫做 chrome內核(即使 chrome內核已經是 blink 了)。

          代表瀏覽器:傲游瀏覽器3、 Apple Safari (Win/Mac/iPhone/iPad)、Symbian手機瀏覽器、Android 4.4之前的默認瀏覽器

          (4)Chromium/Bink(chrome)

          Blink [bi?k] n. 架子;長凳

          在 Chromium 項目中研發 Blink 渲染引擎,內置于 Chrome 瀏覽器之中。Blink 其實是 WebKit 的分支, 也是開源的。 (大名鼎鼎的 V8 是 Chrome 的 JS 引擎

          大部分國產瀏覽器最新版都采用Blink內核。

          (5)Presto(Opera)

          Presto ['pr?sto] adj. 迅速的

          Presto 是挪威產瀏覽器 opera 的 "前任" 內核(渲染引擎),為何說是 "前任",因為最新的 opera 瀏覽器早已將之拋棄從而投入到了谷歌懷抱了。


          了解一點:

          移動端的瀏覽器內核主要說的是系統內置瀏覽器的內核。

          目前移動設備瀏覽器上常用的內核有 Webkit,Blink,Trident,Gecko 等,其中 iPhone 和 iPad 等蘋果 iOS 平臺主要是 WebKit,Android 4.4 之前的 Android 系統瀏覽器內核是 WebKit,Android4.4 系統瀏覽器切換到了Chromium,內核是 Webkit 的分支 Blink,Windows Phone 8 系統瀏覽器內核是 Trident。

          三、Web標準(重點)

          通過了解以上瀏覽器的內核不同,我們知道他們工作原理、解析肯定不同,顯示就會有差別。


          由于不同的瀏覽器解析出來的效果可能不一致,開發中通常需要為同個界面做多版本的開發。

          3.1 Web 標準的好處

          1、讓Web的發展前景更廣闊

          2、內容能被更廣泛的設備訪問

          3、更容易被搜尋引擎搜索

          4、降低網站流量費用

          5、使網站更易于維護

          6、提高頁面瀏覽速度

          3.2 Web 標準構成

          Web標準不是某一個標準,而是由W3C和其他標準化組織制定的一系列標準的集合。主要包括結構(Structure)、表現(Presentation)和行為(Behavior)三個方面。

          • 結構標準:用于對網頁元素進行整理和分類,主要包括XML和XHTML兩個部分(我們主要學習XHTML)。
          • 樣式標準:用于設置網頁元素的版式、顏色、大小等外觀樣式,主要指的是CSS。
          • 行為標準:是指網頁模型的定義及交互的編寫,主要包括 W3C標準(BOM、DOM) 和 ECMAScript 兩個部分

          理想狀態下,我們的源碼由3部分組成: .HTML 文件(定義結構) .css 文件(定義樣式) .js 文件(定義行為)

          這樣代碼的結構清晰,好維護

          打個比方:


          主站蜘蛛池模板: 国产av夜夜欢一区二区三区| 精品人妻系列无码一区二区三区| 久久99精品波多结衣一区| 中文字幕精品一区二区日本| 麻豆精品一区二区综合av| 亚洲一区免费视频| 国产在线精品一区二区不卡| 国产伦精品一区二区三区免.费 | 无码精品一区二区三区在线| 琪琪see色原网一区二区| 中文字幕精品一区二区| 久久青草国产精品一区| 亚洲国产成人久久一区久久| 韩国精品一区视频在线播放| 亚洲视频在线一区二区三区| 亚洲熟妇av一区二区三区漫画| 无码毛片一区二区三区视频免费播放 | 精品一区精品二区制服| 亚洲一区精品无码| 国产成人高清精品一区二区三区| 成人一区专区在线观看| 亚洲AV成人精品一区二区三区 | 国产suv精品一区二区6| 亚洲AV无码国产一区二区三区| 色欲精品国产一区二区三区AV| 手机看片一区二区| 国产一区二区三区高清在线观看 | 国产一区二区三区在线电影| 午夜福利无码一区二区| 久久毛片一区二区| 无码精品一区二区三区| 伊人色综合一区二区三区影院视频 | 国产精品va一区二区三区| 免费一本色道久久一区| 无码一区18禁3D| 国产精品久久久久久一区二区三区| 亚洲AV无码一区二区三区牛牛| 精品无码一区二区三区电影| 国产精品久久久久久麻豆一区| 亚洲一区AV无码少妇电影☆| 亚洲人AV永久一区二区三区久久|