/video/BV14J4114768?p=390
代码：/xiaoqiang001/html_css_material
文章目录
浏览器现状手机屏幕现状常见移动端屏幕尺寸移动端调试方法视口 viewport（布局视口 layout viewport 视觉视口 visual viewport 理想视口 ideal viewport）meta 视口标签二倍图/多倍图（物理像素&物理像素比）背景缩放 background-size （cover覆盖、contain铺满【宽度或高度】）背景图片二倍图（原理跟上面二倍图一样）cutterman快速切二倍图、三倍图移动端开发主流方案移动端技术解决方案移动端浏览器移动端css样式初始化 normalize.csscss3盒子模型（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 | /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格式图片
/video/BV14J4114768?p=412&spm_id_from=pageDriver
