日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

當前位置： 首頁 > 前端技术 > HTML >内容正文

HTML

web前端入门学习 css（10）移动端布局（学到DPG格式图片与webp格式图片停了）

發布時間：2025/3/20 HTML 40 豆豆
生活随笔 收集整理的這篇文章主要介紹了 web前端入门学习 css（10）移动端布局（学到DPG格式图片与webp格式图片停了） 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

https://www.bilibili.com/video/BV14J4114768?p=390

代碼：https://gitee.com/xiaoqiang001/html_css_material

文章目錄

    • 瀏覽器現狀
    • 手機屏幕現狀
    • 常見移動端屏幕尺寸
    • 移動端調試方法
    • 視口 viewport（布局視口 layout viewport 視覺視口 visual viewport 理想視口 ideal viewport）
    • meta 視口標簽
    • 二倍圖/多倍圖（物理像素&物理像素比）
    • 背景縮放 background-size （cover覆蓋、contain鋪滿【寬度或高度】）
    • 背景圖片二倍圖（原理跟上面二倍圖一樣）
      • cutterman快速切二倍圖、三倍圖
    • 移動端開發主流方案
    • 移動端技術解決方案
      • 移動端瀏覽器
      • 移動端css樣式初始化 normalize.css
      • css3盒子模型（box-sizing: border-box;）傳統盒子模型（box-sizing: content-box;）
      • 移動端特殊樣式（去除元素背景變藍高亮效果 -webkit-tap-highlight-color: transparent;）（去除按鈕外觀效果 -webkit-appearance: none;）（禁用圖片或鏈接長按時彈出菜單 -webkit-touch-callout: none;）
    • 移動端常見布局
      • 移動端技術選型
      • 流式布局
    • 案例：京東移動端首頁
      • 二倍精靈圖做法
      • DPG格式圖片與webp格式圖片

瀏覽器現狀

手機屏幕現狀

常見移動端屏幕尺寸

移動端調試方法



視口 viewport（布局視口 layout viewport 視覺視口 visual viewport 理想視口 ideal viewport）




meta 視口標簽

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title> </head><body>黑馬程序員 </body></html>

未加視口標簽和加視口標簽后：

二倍圖/多倍圖（物理像素&物理像素比）

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>* {margin: 0;padding: 0;}div {width: 300px;height: 300px;background-color: pink;}/* 1. 物理像素 就是我們說的分辨率 iPhone8的物理像素是 750 *//* 2. 在 iPhone8里面 1px 開發像素 = 2個物理像素 */</style> </head><body><div></div> </body></html>


<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>/* 我們需要一個50*50像素（css像素）的圖片 直接放到我們的iphone8 里面會放大2倍 100* 100 就會模糊 *//* 我們采取的是 放一個 100* 100 圖片 然后手動的把這個圖片 縮小為 50* 50 （css像素） *//* 我們準備的圖片 比我們實際需要的大小 大2倍，這就方式就是 2倍圖 */img:nth-child(2) {width: 50px;height: 50px;}</style> </head><body><!-- 模糊的 --><img src="apple50.jpg" alt=""><!-- 我們采取2倍圖 --><img src="apple100.jpg" alt=""> </body></html>


就是準備一張比實際大兩倍的圖，在html里手動縮放到一半，然后到手機上手機又自動放大兩倍，能保證清晰度

背景縮放 background-size （cover覆蓋、contain鋪滿【寬度或高度】）

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div {width: 500px;height: 500px;border: 2px solid red;background: url(蜥蜴女仆.gif) no-repeat;/* background-size: 圖片的寬度 圖片的高度; *//* background-size: 500px 200px; *//* 1.只寫一個參數 肯定是寬度 高度省略了 會等比例縮放 *//* background-size: 500px; *//* 2. 里面的單位可以跟% 相對于父盒子來說的 *//* background-size: 50%; *//* 3. cover 等比例拉伸 要完全覆蓋div盒子 可能有部分背景圖片顯示不全 *//* background-size: cover; *//* 4. contain 高度和寬度等比例拉伸 當寬度 或者高度 鋪滿div盒子就不再進行拉伸了 可能有部分空白區域 */background-size: contain;}</style> </head><body><div></div><p></p> </body></html>

背景圖片二倍圖（原理跟上面二倍圖一樣）

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>/* 1. 我們有一個 50 * 50的盒子需要一個背景圖片，但是根據分析這個圖片還是要準備2倍， 100*100 *//* 2. 我們需要把這個圖片縮放一半，也就是 50*50 background-size*/div {width: 50px;height: 50px;border: 1px solid red;background: url(images/apple100.jpg) no-repeat;background-size: 50px 50px;}</style> </head><body><div></div> </body></html>

cutterman快速切二倍圖、三倍圖

移動端開發主流方案




移動端技術解決方案

移動端瀏覽器

移動端css樣式初始化 normalize.css


http://necolas.github.io/normalize.css/

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css *//* Document========================================================================== *//*** 1. Correct the line height in all browsers.* 2. Prevent adjustments of font size after orientation changes in iOS.*/html {line-height: 1.15; /* 1 */-webkit-text-size-adjust: 100%; /* 2 */ }/* Sections========================================================================== *//*** Remove the margin in all browsers.*/body {margin: 0; }/*** Render the `main` element consistently in IE.*/main {display: block; }/*** Correct the font size and margin on `h1` elements within `section` and* `article` contexts in Chrome, Firefox, and Safari.*/h1 {font-size: 2em;margin: 0.67em 0; }/* Grouping content========================================================================== *//*** 1. Add the correct box sizing in Firefox.* 2. Show the overflow in Edge and IE.*/hr {box-sizing: content-box; /* 1 */height: 0; /* 1 */overflow: visible; /* 2 */ }/*** 1. Correct the inheritance and scaling of font size in all browsers.* 2. Correct the odd `em` font sizing in all browsers.*/pre {font-family: monospace, monospace; /* 1 */font-size: 1em; /* 2 */ }/* Text-level semantics========================================================================== *//*** Remove the gray background on active links in IE 10.*/a {background-color: transparent; }/*** 1. Remove the bottom border in Chrome 57-* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.*/abbr[title] {border-bottom: none; /* 1 */text-decoration: underline; /* 2 */text-decoration: underline dotted; /* 2 */ }/*** Add the correct font weight in Chrome, Edge, and Safari.*/b, strong {font-weight: bolder; }/*** 1. Correct the inheritance and scaling of font size in all browsers.* 2. Correct the odd `em` font sizing in all browsers.*/code, kbd, samp {font-family: monospace, monospace; /* 1 */font-size: 1em; /* 2 */ }/*** Add the correct font size in all browsers.*/small {font-size: 80%; }/*** Prevent `sub` and `sup` elements from affecting the line height in* all browsers.*/sub, sup {font-size: 75%;line-height: 0;position: relative;vertical-align: baseline; }sub {bottom: -0.25em; }sup {top: -0.5em; }/* Embedded content========================================================================== *//*** Remove the border on images inside links in IE 10.*/img {border-style: none; }/* Forms========================================================================== *//*** 1. Change the font styles in all browsers.* 2. Remove the margin in Firefox and Safari.*/button, input, optgroup, select, textarea {font-family: inherit; /* 1 */font-size: 100%; /* 1 */line-height: 1.15; /* 1 */margin: 0; /* 2 */ }/*** Show the overflow in IE.* 1. Show the overflow in Edge.*/button, input { /* 1 */overflow: visible; }/*** Remove the inheritance of text transform in Edge, Firefox, and IE.* 1. Remove the inheritance of text transform in Firefox.*/button, select { /* 1 */text-transform: none; }/*** Correct the inability to style clickable types in iOS and Safari.*/button, [type="button"], [type="reset"], [type="submit"] {-webkit-appearance: button; }/*** Remove the inner border and padding in Firefox.*/button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {border-style: none;padding: 0; }/*** Restore the focus styles unset by the previous rule.*/button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring {outline: 1px dotted ButtonText; }/*** Correct the padding in Firefox.*/fieldset {padding: 0.35em 0.75em 0.625em; }/*** 1. Correct the text wrapping in Edge and IE.* 2. Correct the color inheritance from `fieldset` elements in IE.* 3. Remove the padding so developers are not caught out when they zero out* `fieldset` elements in all browsers.*/legend {box-sizing: border-box; /* 1 */color: inherit; /* 2 */display: table; /* 1 */max-width: 100%; /* 1 */padding: 0; /* 3 */white-space: normal; /* 1 */ }/*** Add the correct vertical alignment in Chrome, Firefox, and Opera.*/progress {vertical-align: baseline; }/*** Remove the default vertical scrollbar in IE 10+.*/textarea {overflow: auto; }/*** 1. Add the correct box sizing in IE 10.* 2. Remove the padding in IE 10.*/[type="checkbox"], [type="radio"] {box-sizing: border-box; /* 1 */padding: 0; /* 2 */ }/*** Correct the cursor style of increment and decrement buttons in Chrome.*/[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {height: auto; }/*** 1. Correct the odd appearance in Chrome and Safari.* 2. Correct the outline style in Safari.*/[type="search"] {-webkit-appearance: textfield; /* 1 */outline-offset: -2px; /* 2 */ }/*** Remove the inner padding in Chrome and Safari on macOS.*/[type="search"]::-webkit-search-decoration {-webkit-appearance: none; }/*** 1. Correct the inability to style clickable types in iOS and Safari.* 2. Change font properties to `inherit` in Safari.*/::-webkit-file-upload-button {-webkit-appearance: button; /* 1 */font: inherit; /* 2 */ }/* Interactive========================================================================== *//** Add the correct display in Edge, IE 10+, and Firefox.*/details {display: block; }/** Add the correct display in all browsers.*/summary {display: list-item; }/* Misc========================================================================== *//*** Add the correct display in IE 10+.*/template {display: none; }/*** Add the correct display in IE 10.*/[hidden] {display: none; }

css3盒子模型（box-sizing: border-box;）傳統盒子模型（box-sizing: content-box;）

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div:nth-child(1) {/* 傳統盒子模型= width + border + padding */width: 200px;height: 200px;background-color: pink;padding: 10px;border: 10px solid red;box-sizing: content-box;}div:nth-child(2) {/* 有了這句話就讓盒子變成CSS3盒子模型 *//* padding 和 border 不會再撐大盒子了 */box-sizing: border-box;width: 200px;height: 200px;background-color: purple;padding: 10px;border: 10px solid blue;}</style> </head><body><div></div><div></div> </body></html>

移動端特殊樣式（去除元素背景變藍高亮效果 -webkit-tap-highlight-color: transparent;）（去除按鈕外觀效果 -webkit-appearance: none;）（禁用圖片或鏈接長按時彈出菜單 -webkit-touch-callout: none;）

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>a {-webkit-tap-highlight-color: transparent;}input {-webkit-appearance: none;}</style> </head><body><a href="#">黑馬</a><input type="button" value="按鈕"> </body></html>

移動端常見布局

移動端技術選型

流式布局


案例：京東移動端首頁



二倍精靈圖做法

DPG格式圖片與webp格式圖片


https://www.bilibili.com/video/BV14J4114768?p=412&spm_id_from=pageDriver

總結

以上是生活随笔為你收集整理的web前端入门学习 css（10）移动端布局（学到DPG格式图片与webp格式图片停了）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。