一、移动端开发要点

  • 视图，指的是屏幕可以展示的地方
    1. <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, 
    2.                              maximum-scale=1.0, minimum-scale=1.0">
    | 属性 | 说明 | | —- | —- | | width | 宽度设置的是viewport宽度，可以设置device-width的特殊值 | | initial-scale | 初始缩放比，大于0的数字，一般取值为1.0 | | maximum-scale | 最大缩放比，大于0的数字，一般取值为1.0 | | minimum-scale | 最小缩放比，大于0的数字，一般取值为1.0 | | user-scalable | 用户是否可以缩放，取值yes或no（1或0） |
  1. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, 
  2.                                minimum-scale=1.0, user-scalable=no">
  3. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  • css中的px不等于手机的物理像素值，通常是1px=2物理像素或者1px=3物理像素等等

1.1 二倍图以及多倍图(和背景图缩放方式)

  • 一张50*50px的图片，在手机上展开，按照刚才的物理像素比会将图片放大倍数导致图片模糊
  • 因此用倍图来解决这个问题
  • 通常这样子做：
    • 在手机上要想展示清楚的图片，就优先考虑图片在手机上会放大的因素，因此先选用在手机上能高清展示的多倍图，
    • 然后手动通过调节css样式，将图片按照进行物理像素比进行缩小即可 ```html img{ /原始能在手机上高清展示的100100px的图片，进行手动按照物理像素比缩小*/ width:50px; heigh:50px; }

.box{ /背景图片缩放/ /可以写百分比，根据父盒子的长度或宽度取百分比值/ /如果只写一个，则默认是宽度，长度根据宽度等比例缩放/ /如果取值cover，则是等比例缩放至完全覆盖div盒子/ /如果取值contain，则是等比例缩放至当高度或宽度铺满div盒子为止/ background-size:50px 50px; }

css高级（二——移动端布局） - 图1

  2. <a name="JKEQT"></a>
  3. ## 1.2 移动端开发选择
  4. <a name="Agvsg"></a>
  5. ### （1）移动端css初始化normalize.css
  7. - normalize.css：保护了有价值的默认值，修复了浏览器的bug，是模块化的，拥有详细的文档；
  8. - 官网：http://necolas.github.io/normalize.css/
  10. <a name="rQAFY"></a>
  11. ### （2）移动端特殊样式
  13. - css3盒子模型：
  14.    - box-sizing:border-box;
  15.    - -webkit-box-sizing:border-box;
  16. - 清除点击高亮效果：
  17.    - -webkit-tap-highlight-color:transparent;
  18. - 取消移动端按钮、输入框默认的样式，以便自定义样式
  19.    - -webkit-appearance:none;
  20. - 禁用长按页面时弹出菜单（尤其是图片和链接）
  21.    - img,a{  -webkit-touch-callout:none;  }
  23. <a name="BfdrX"></a>
  24. ## 3.3 移动端常见的页面布局
  25. <a name="wI4vF"></a>
  26. ### （1）技术选型——单独制作移动端页面（主流）
  28. - 说白了就是单独写几个页面，pc端和移动端单独制作，移动端通常在域名中加个“m”
  30. <a name="cSRMU"></a>
  31. #### 流式布局（百分比布局）：
  33.    - 通过盒子的宽度设置成百分比来进行伸缩，不受固定像素的限制，内容项两侧填充
  34.    - max-width  最大宽度（max-height  最大高度）
  35.    - min-width  最小宽度（min-height  最小高度）
  36. - 流式布局案例
  37.    - index.html
  38. ```html
  39. <!DOCTYPE html>
  40. <html lang="en">
  42. <head>
  43.     <meta charset="UTF-8">
  44.     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
  45.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  46.     <!-- 引入我们的css初始化文件 -->
  47.     <link rel="stylesheet" href="css/normalize.css">
  48.     <!-- 引入我们首页的css -->
  49.     <link rel="stylesheet" href="css/index.css">
  50.     <title>Document</title>
  51. </head>
  53. <body>
  54.     <!-- 顶部 -->
  55.     <header class="app">
  56.         <ul>
  57.             <li>
  58.                 <img src="images/close.png" alt="">
  59.             </li>
  60.             <li>
  61.                 <img src="images/logo.png" alt="">
  62.             </li>
  63.             <li>打开京东App，购物更轻松</li>
  64.             <li>立即打开</li>
  65.         </ul>
  66.     </header>
  67.     <!-- 搜索 -->
  68.     <div class="search-wrap">
  69.         <div class="search-btn"></div>
  70.         <div class="search">
  71.             <div class="jd-icon"></div>
  72.             <div class="sou"></div>
  73.         </div>
  74.         <div class="search-login">登陆</div>
  75.     </div>
  76.     <!-- 主体内容部分 -->
  77.     <div class="main-content">
  78.         <!-- 滑动图 -->
  79.         <div class="slider">
  80.             <img src="upload/banner.dpg" alt="">
  81.         </div>
  83.         <!-- 小家电品牌日 -->
  84.         <div class="brand">
  85.             <div>
  86.                 <a href="#">
  87.                     <img src="upload/pic11.dpg" alt="">
  88.                 </a>
  89.             </div>
  90.             <div>
  91.                 <a href="#">
  92.                     <img src="upload/pic22.dpg" alt="">
  93.                 </a>
  95.             </div>
  96.             <div>
  97.                 <a href="#">
  98.                     <img src="upload/pic33.dpg" alt="">
  99.                 </a>
  101.             </div>
  102.         </div>
  103.         <!-- nav部分 -->
  104.         <nav class="clearfix">
  105.             <a href="">
  106.                 <img src="upload/nav1.webp" alt="">
  107.                 <span>京东超市</span>
  108.             </a>
  110.             <a href="">
  111.                 <img src="upload/nav2.webp" alt="">
  112.                 <span>京东超市</span>
  113.             </a>
  115.             <a href="">
  116.                 <img src="upload/nav1.webp" alt="">
  117.                 <span>京东超市</span>
  118.             </a>
  120.             <a href="">
  121.                 <img src="upload/nav1.webp" alt="">
  122.                 <span>京东超市</span>
  123.             </a>
  125.             <a href="">
  126.                 <img src="upload/nav1.webp" alt="">
  127.                 <span>京东超市</span>
  128.             </a>
  130.             <a href="">
  131.                 <img src="upload/nav3.webp" alt="">
  132.                 <span>京东超市</span>
  133.             </a>
  135.             <a href="">
  136.                 <img src="upload/nav1.webp" alt="">
  137.                 <span>京东超市</span>
  138.             </a>
  140.             <a href="">
  141.                 <img src="upload/nav1.webp" alt="">
  142.                 <span>京东超市</span>
  143.             </a>
  145.             <a href="">
  146.                 <img src="upload/nav1.webp" alt="">
  147.                 <span>京东超市</span>
  148.             </a>
  150.             <a href="">
  151.                 <img src="upload/nav1.webp" alt="">
  152.                 <span>京东超市</span>
  153.             </a>
  155.         </nav>
  156.         <!-- 新闻模块 -->
  157.         <div class="news">
  158.             <a href="#">
  159.                 <img src="upload/new1.dpg" alt="">
  160.             </a>
  161.             <a href="#">
  162.                 <img src="upload/new2.dpg" alt="">
  164.             </a>
  165.             <a href="#">
  166.                 <img src="upload/new3.dpg" alt="">
  168.             </a>
  169.         </div>
  170.     </div>
  171. </body>
  173. </html>
  • index.css ```css body { width: 100%; min-width: 320px; max-width: 640px; margin: 0 auto; font-size: 14px; font-family: -apple-system, Helvetica, sans-serif; color: #666; line-height: 1.5; }

/点击高亮我们需要清除清除 设置为transparent 完成透明/

  • { -webkit-tap-highlight-color: transparent; }

/在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式/

input { -webkit-appearance: none; }

/禁用长按页面时的弹出菜单/

img, a { -webkit-touch-callout: none; }

a { color: #666; text-decoration: none; }

ul { margin: 0; padding: 0; list-style: none; }

img { vertical-align: middle; }

div { / css3 盒子模型 / box-sizing: border-box; }

.clearfix:after { content: “”; display: block; line-height: 0; visibility: hidden; height: 0; clear: both; }

.app { height: 45px; }

.app ul li { float: left; height: 45px; line-height: 45px; background-color: #333333; text-align: center; color: #fff; }

.app ul li:nth-child(1) { width: 8%; }

.app ul li:nth-child(1) img { width: 10px; }

.app ul li:nth-child(2) { width: 10%; }

.app ul li:nth-child(2) img { width: 30px; vertical-align: middle; }

.app ul li:nth-child(3) { width: 57%; }

.app ul li:nth-child(4) { width: 25%; background-color: #F63515; }

/ 搜索 /

.search-wrap { position: fixed; overflow: hidden; width: 100%; height: 44px; min-width: 320px; max-width: 640px; }

.search-btn { position: absolute; top: 0; left: 0; width: 40px; height: 44px; }

.search-btn::before { content: “”; display: block; width: 20px; height: 18px; background: url(../images/s-btn.png) no-repeat; background-size: 20px 18px; margin: 14px 0 0 15px; }

.search-login { position: absolute; right: 0; top: 0; width: 40px; height: 44px; color: #fff; line-height: 44px; }

.search { position: relative; height: 30px; background-color: #fff; margin: 0 50px; border-radius: 15px; margin-top: 7px; }

.jd-icon { width: 20px; height: 15px; position: absolute; top: 8px; left: 13px; background: url(../images/jd.png) no-repeat; background-size: 20px 15px; }

.jd-icon::after { content: “”; position: absolute; right: -8px; top: 0; display: block; width: 1px; height: 15px; background-color: #ccc; }

.sou { position: absolute; top: 8px; left: 50px; width: 18px; height: 15px; background: url(../images/jd-sprites.png) no-repeat -81px 0; background-size: 200px auto; }

.slider img { width: 100%; }

/ 品牌日 /

.brand { overflow: hidden; border-radius: 10px 10px 0 0; }

.brand div { float: left; width: 33.33%; }

.brand div img { width: 100%; }

/ nav /

nav { padding-top: 5px; }

nav a { float: left; width: 20%; text-align: center; }

nav a img { width: 40px; margin: 10px 0; }

nav a span { display: block; }

/ news /

.news { margin-top: 20px; }

.news img { width: 100%; }

.news a { float: left; box-sizing: border-box; }

.news a:nth-child(1) { width: 50%; }

/ .news a:nth-child(2), .news a:nth-child(3), { width: 25%; } /

/ n+2 就是从从2个往后面选 /

.news a:nth-child(n+2) { width: 25%; border-left: 1px solid #ccc; }

/ .news a:nth-child(3) { width: 25%; } /

  2.    - 初始化样式文件normalize.css
  3. ```css
  4. /*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
  6. /**
  7.  * 1. Change the default font family in all browsers (opinionated).
  8.  * 2. Correct the line height in all browsers.
  9.  * 3. Prevent adjustments of font size after orientation changes in
  10.  *    IE on Windows Phone and in iOS.
  11.  */
  13. /* Document
  14.    ========================================================================== */
  16. html {
  17.   font-family: sans-serif; /* 1 */
  18.   line-height: 1.15; /* 2 */
  19.   -ms-text-size-adjust: 100%; /* 3 */
  20.   -webkit-text-size-adjust: 100%; /* 3 */
  21. }
  23. /* Sections
  24.    ========================================================================== */
  26. /**
  27.  * Remove the margin in all browsers (opinionated).
  28.  */
  30. body {
  31.   margin: 0;
  32. }
  34. /**
  35.  * Add the correct display in IE 9-.
  36.  */
  38. article,
  39. aside,
  40. footer,
  41. header,
  42. nav,
  43. section {
  44.   display: block;
  45. }
  47. /**
  48.  * Correct the font size and margin on `h1` elements within `section` and
  49.  * `article` contexts in Chrome, Firefox, and Safari.
  50.  */
  52. h1 {
  53.   font-size: 2em;
  54.   margin: 0.67em 0;
  55. }
  57. /* Grouping content
  58.    ========================================================================== */
  60. /**
  61.  * Add the correct display in IE 9-.
  62.  * 1. Add the correct display in IE.
  63.  */
  65. figcaption,
  66. figure,
  67. main { /* 1 */
  68.   display: block;
  69. }
  71. /**
  72.  * Add the correct margin in IE 8.
  73.  */
  75. figure {
  76.   margin: 1em 40px;
  77. }
  79. /**
  80.  * 1. Add the correct box sizing in Firefox.
  81.  * 2. Show the overflow in Edge and IE.
  82.  */
  84. hr {
  85.   box-sizing: content-box; /* 1 */
  86.   height: 0; /* 1 */
  87.   overflow: visible; /* 2 */
  88. }
  90. /**
  91.  * 1. Correct the inheritance and scaling of font size in all browsers.
  92.  * 2. Correct the odd `em` font sizing in all browsers.
  93.  */
  95. pre {
  96.   font-family: monospace, monospace; /* 1 */
  97.   font-size: 1em; /* 2 */
  98. }
  100. /* Text-level semantics
  101.    ========================================================================== */
  103. /**
  104.  * 1. Remove the gray background on active links in IE 10.
  105.  * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
  106.  */
  108. a {
  109.   background-color: transparent; /* 1 */
  110.   -webkit-text-decoration-skip: objects; /* 2 */
  111. }
  113. /**
  114.  * Remove the outline on focused links when they are also active or hovered
  115.  * in all browsers (opinionated).
  116.  */
  118. a:active,
  119. a:hover {
  120.   outline-width: 0;
  121. }
  123. /**
  124.  * 1. Remove the bottom border in Firefox 39-.
  125.  * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
  126.  */
  128. abbr[title] {
  129.   border-bottom: none; /* 1 */
  130.   text-decoration: underline; /* 2 */
  131.   text-decoration: underline dotted; /* 2 */
  132. }
  134. /**
  135.  * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
  136.  */
  138. b,
  139. strong {
  140.   font-weight: inherit;
  141. }
  143. /**
  144.  * Add the correct font weight in Chrome, Edge, and Safari.
  145.  */
  147. b,
  148. strong {
  149.   font-weight: bolder;
  150. }
  152. /**
  153.  * 1. Correct the inheritance and scaling of font size in all browsers.
  154.  * 2. Correct the odd `em` font sizing in all browsers.
  155.  */
  157. code,
  158. kbd,
  159. samp {
  160.   font-family: monospace, monospace; /* 1 */
  161.   font-size: 1em; /* 2 */
  162. }
  164. /**
  165.  * Add the correct font style in Android 4.3-.
  166.  */
  168. dfn {
  169.   font-style: italic;
  170. }
  172. /**
  173.  * Add the correct background and color in IE 9-.
  174.  */
  176. mark {
  177.   background-color: #ff0;
  178.   color: #000;
  179. }
  181. /**
  182.  * Add the correct font size in all browsers.
  183.  */
  185. small {
  186.   font-size: 80%;
  187. }
  189. /**
  190.  * Prevent `sub` and `sup` elements from affecting the line height in
  191.  * all browsers.
  192.  */
  194. sub,
  195. sup {
  196.   font-size: 75%;
  197.   line-height: 0;
  198.   position: relative;
  199.   vertical-align: baseline;
  200. }
  202. sub {
  203.   bottom: -0.25em;
  204. }
  206. sup {
  207.   top: -0.5em;
  208. }
  210. /* Embedded content
  211.    ========================================================================== */
  213. /**
  214.  * Add the correct display in IE 9-.
  215.  */
  217. audio,
  218. video {
  219.   display: inline-block;
  220. }
  222. /**
  223.  * Add the correct display in iOS 4-7.
  224.  */
  226. audio:not([controls]) {
  227.   display: none;
  228.   height: 0;
  229. }
  231. /**
  232.  * Remove the border on images inside links in IE 10-.
  233.  */
  235. img {
  236.   border-style: none;
  237. }
  239. /**
  240.  * Hide the overflow in IE.
  241.  */
  243. svg:not(:root) {
  244.   overflow: hidden;
  245. }
  247. /* Forms
  248.    ========================================================================== */
  250. /**
  251.  * 1. Change the font styles in all browsers (opinionated).
  252.  * 2. Remove the margin in Firefox and Safari.
  253.  */
  255. button,
  256. input,
  257. optgroup,
  258. select,
  259. textarea {
  260.   font-family: sans-serif; /* 1 */
  261.   font-size: 100%; /* 1 */
  262.   line-height: 1.15; /* 1 */
  263.   margin: 0; /* 2 */
  264. }
  266. /**
  267.  * Show the overflow in IE.
  268.  * 1. Show the overflow in Edge.
  269.  */
  271. button,
  272. input { /* 1 */
  273.   overflow: visible;
  274. }
  276. /**
  277.  * Remove the inheritance of text transform in Edge, Firefox, and IE.
  278.  * 1. Remove the inheritance of text transform in Firefox.
  279.  */
  281. button,
  282. select { /* 1 */
  283.   text-transform: none;
  284. }
  286. /**
  287.  * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
  288.  *    controls in Android 4.
  289.  * 2. Correct the inability to style clickable types in iOS and Safari.
  290.  */
  292. button,
  293. html [type="button"], /* 1 */
  294. [type="reset"],
  295. [type="submit"] {
  296.   -webkit-appearance: button; /* 2 */
  297. }
  299. /**
  300.  * Remove the inner border and padding in Firefox.
  301.  */
  303. button::-moz-focus-inner,
  304. [type="button"]::-moz-focus-inner,
  305. [type="reset"]::-moz-focus-inner,
  306. [type="submit"]::-moz-focus-inner {
  307.   border-style: none;
  308.   padding: 0;
  309. }
  311. /**
  312.  * Restore the focus styles unset by the previous rule.
  313.  */
  315. button:-moz-focusring,
  316. [type="button"]:-moz-focusring,
  317. [type="reset"]:-moz-focusring,
  318. [type="submit"]:-moz-focusring {
  319.   outline: 1px dotted ButtonText;
  320. }
  322. /**
  323.  * Change the border, margin, and padding in all browsers (opinionated).
  324.  */
  326. fieldset {
  327.   border: 1px solid #c0c0c0;
  328.   margin: 0 2px;
  329.   padding: 0.35em 0.625em 0.75em;
  330. }
  332. /**
  333.  * 1. Correct the text wrapping in Edge and IE.
  334.  * 2. Correct the color inheritance from `fieldset` elements in IE.
  335.  * 3. Remove the padding so developers are not caught out when they zero out
  336.  *    `fieldset` elements in all browsers.
  337.  */
  339. legend {
  340.   box-sizing: border-box; /* 1 */
  341.   color: inherit; /* 2 */
  342.   display: table; /* 1 */
  343.   max-width: 100%; /* 1 */
  344.   padding: 0; /* 3 */
  345.   white-space: normal; /* 1 */
  346. }
  348. /**
  349.  * 1. Add the correct display in IE 9-.
  350.  * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
  351.  */
  353. progress {
  354.   display: inline-block; /* 1 */
  355.   vertical-align: baseline; /* 2 */
  356. }
  358. /**
  359.  * Remove the default vertical scrollbar in IE.
  360.  */
  362. textarea {
  363.   overflow: auto;
  364. }
  366. /**
  367.  * 1. Add the correct box sizing in IE 10-.
  368.  * 2. Remove the padding in IE 10-.
  369.  */
  371. [type="checkbox"],
  372. [type="radio"] {
  373.   box-sizing: border-box; /* 1 */
  374.   padding: 0; /* 2 */
  375. }
  377. /**
  378.  * Correct the cursor style of increment and decrement buttons in Chrome.
  379.  */
  381. [type="number"]::-webkit-inner-spin-button,
  382. [type="number"]::-webkit-outer-spin-button {
  383.   height: auto;
  384. }
  386. /**
  387.  * 1. Correct the odd appearance in Chrome and Safari.
  388.  * 2. Correct the outline style in Safari.
  389.  */
  391. [type="search"] {
  392.   -webkit-appearance: textfield; /* 1 */
  393.   outline-offset: -2px; /* 2 */
  394. }
  396. /**
  397.  * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
  398.  */
  400. [type="search"]::-webkit-search-cancel-button,
  401. [type="search"]::-webkit-search-decoration {
  402.   -webkit-appearance: none;
  403. }
  405. /**
  406.  * 1. Correct the inability to style clickable types in iOS and Safari.
  407.  * 2. Change font properties to `inherit` in Safari.
  408.  */
  410. ::-webkit-file-upload-button {
  411.   -webkit-appearance: button; /* 1 */
  412.   font: inherit; /* 2 */
  413. }
  415. /* Interactive
  416.    ========================================================================== */
  418. /*
  419.  * Add the correct display in IE 9-.
  420.  * 1. Add the correct display in Edge, IE, and Firefox.
  421.  */
  423. details, /* 1 */
  424. menu {
  425.   display: block;
  426. }
  428. /*
  429.  * Add the correct display in all browsers.
  430.  */
  432. summary {
  433.   display: list-item;
  434. }
  436. /* Scripting
  437.    ========================================================================== */
  439. /**
  440.  * Add the correct display in IE 9-.
  441.  */
  443. canvas {
  444.   display: inline-block;
  445. }
  447. /**
  448.  * Add the correct display in IE.
  449.  */
  451. template {
  452.   display: none;
  453. }
  455. /* Hidden
  456.    ========================================================================== */
  458. /**
  459.  * Add the correct display in IE 10-.
  460.  */
  462. [hidden] {
  463.   display: none;
  464. }

flex弹性布局（强烈推荐）：

  • 采用flex布局的元素，称之为flex容器，简称“容器”，它的所有的子元素自动成为容器的一员，称为flex项目，简称“项目”
  • 子元素就可以纵向、横向排列了
  • 当我们为父元素添加display=flex之后，子元素的float、clear、vertical-align将失效
  • 常见的父项元素属性（设置在父元素中的属性）
    • flex-direction：设置主轴方向（设置子元素按行排列还是列排列），取值为：row（默认从左到右排列）；row-reverse（从右到左）；column（从上到下）；column-reverse（从下到上）
    • justify-content：属性定义了项目在主轴上的对齐方式；使用该属性的前提是确定好主轴排列的方式；取值为：flex-start（默认从头开始排列，如果是主轴x轴则是从左到右）；flex-end（从尾部开始排列）；center（居中排列）；space-around（平分剩余空间）；space-between（先两边贴边，再；平分剩余空间）
    • flex-wrap：决定子元素是否换行，取值为nowrap（默认值不换行）；wrap（换行）；当装不下子元素，则将子元素收缩
    • align-items：设置侧轴上的元素排列方式（单行），取值为：flex-start（默认从头开始排列，如果是主轴x轴则是从左到右）；flex-end（从尾部开始排列）；center（挤在一起居中（垂直居中））；stretch（拉伸默认值，前提是不设置盒子高度）
    • flex-flow属性是flex-direction和flex-wrap属性的属性复合：flex-flow：row wrap
  • 常见子项元素属性：
    • flex属性：定义子项元素分配父元素剩余空间：.item{ flex: num（数字） }
    • align-self属性：控制子项元素自己在侧轴上的排列方式，允许单个项目有与其他项目不一样的对齐方式，可以覆盖align-items属性，默认值是auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。取值跟align-items属性一样；
    • order属性：定义子项目的排列顺序；数值越小排列越靠前，默认是零；
      • flex弹性布局案例
  • index.html ```html <!DOCTYPE html>
搜索:目的地/酒店/景点/航班号
我 的
css高级（二——移动端布局） - 图2

热门活动

获取更多福利
css高级（二——移动端布局） - 图3 css高级（二——移动端布局） - 图4
css高级（二——移动端布局） - 图5 css高级（二——移动端布局） - 图6
css高级（二——移动端布局） - 图7 css高级（二——移动端布局） - 图8 

  2.    - index.css
  3. ```css
  4. body {
  5.     max-width: 540px;
  6.     min-width: 320px;
  7.     margin: 0 auto;
  8.     font: normal 14px/1.5 Tahoma, "Lucida Grande", Verdana, "Microsoft Yahei", STXihei, hei;
  9.     color: #000;
  10.     background: #f2f2f2;
  11.     overflow-x: hidden;
  12.     -webkit-tap-highlight-color: transparent;
  13. }
  15. ul {
  16.     list-style: none;
  17.     margin: 0;
  18.     padding: 0;
  19. }
  21. a {
  22.     text-decoration: none;
  23.     color: #222;
  24. }
  26. div {
  27.     box-sizing: border-box;
  28. }
  31. /* 搜索模块 */
  33. .search-index {
  34.     display: flex;
  35.     /* 固定定位跟父级没有关系 它以屏幕为准 */
  36.     position: fixed;
  37.     top: 0;
  38.     left: 50%;
  39.     /* 固定的盒子应该有宽度 */
  40.     -webkit-transform: translateX(-50%);
  41.     transform: translateX(-50%);
  42.     width: 100%;
  43.     min-width: 320px;
  44.     max-width: 540px;
  45.     height: 44px;
  46.     /* background-color: pink; */
  47.     background-color: #F6F6F6;
  48.     border-top: 1px solid #ccc;
  49.     border-bottom: 1px solid #ccc;
  50. }
  52. .search {
  53.     position: relative;
  54.     height: 26px;
  55.     line-height: 24px;
  56.     border: 1px solid #ccc;
  57.     flex: 1;
  58.     font-size: 12px;
  59.     color: #666;
  60.     margin: 7px 10px;
  61.     padding-left: 25px;
  62.     border-radius: 5px;
  63.     box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
  64. }
  66. .search::before {
  67.     content: "";
  68.     position: absolute;
  69.     top: 5px;
  70.     left: 5px;
  71.     width: 15px;
  72.     height: 15px;
  73.     background: url(../images/sprite.png) no-repeat -59px -279px;
  74.     background-size: 104px auto;
  75. }
  77. .user {
  78.     width: 44px;
  79.     height: 44px;
  80.     /* background-color: purple; */
  81.     font-size: 12px;
  82.     text-align: center;
  83.     color: #2eaae0;
  84. }
  86. .user::before {
  87.     content: "";
  88.     display: block;
  89.     width: 23px;
  90.     height: 23px;
  91.     background: url(../images/sprite.png) no-repeat -59px -194px;
  92.     background-size: 104px auto;
  93.     margin: 4px auto -2px;
  94. }
  97. /* focus */
  99. .focus {
  100.     padding-top: 44px;
  101. }
  103. .focus img {
  104.     width: 100%;
  105. }
  108. /* local-nav */
  110. .local-nav {
  111.     display: flex;
  112.     height: 64px;
  113.     margin: 3px 4px;
  114.     background-color: #fff;
  115.     border-radius: 8px;
  116. }
  118. .local-nav li {
  119.     flex: 1;
  120. }
  122. .local-nav a {
  123.     display: flex;
  124.     flex-direction: column;
  125.     /* 侧轴居中对齐 因为是单行 */
  126.     align-items: center;
  127.     font-size: 12px;
  128. }
  130. .local-nav li [class^="local-nav-icon"] {
  131.     width: 32px;
  132.     height: 32px;
  133.     background-color: pink;
  134.     margin-top: 8px;
  135.     background: url(../images/localnav_bg.png) no-repeat 0 0;
  136.     background-size: 32px auto;
  137. }
  139. .local-nav li .local-nav-icon-icon2 {
  140.     background-position: 0 -32px;
  141. }
  143. .local-nav li .local-nav-icon-icon3 {
  144.     background-position: 0 -64px;
  145. }
  147. .local-nav li .local-nav-icon-icon4 {
  148.     background-position: 0 -96px;
  149. }
  151. .local-nav li .local-nav-icon-icon5 {
  152.     background-position: 0 -128px;
  153. }
  156. /* nav */
  158. nav {
  159.     overflow: hidden;
  160.     border-radius: 8px;
  161.     margin: 0 4px 3px;
  162. }
  164. .nav-common {
  165.     display: flex;
  166.     height: 88px;
  167.     background-color: pink;
  168. }
  170. .nav-common:nth-child(2) {
  171.     margin: 3px 0;
  172. }
  174. .nav-items {
  175.     /* 不冲突的 */
  176.     flex: 1;
  177.     display: flex;
  178.     flex-direction: column;
  179. }
  181. .nav-items a {
  182.     flex: 1;
  183.     text-align: center;
  184.     line-height: 44px;
  185.     color: #fff;
  186.     font-size: 14px;
  187.     /* 文字阴影 */
  188.     text-shadow: 1px 1px rgba(0, 0, 0, .2);
  189. }
  191. .nav-items a:nth-child(1) {
  192.     border-bottom: 1px solid #fff;
  193. }
  195. .nav-items:nth-child(1) a {
  196.     border: 0;
  197.     background: url(../images/hotel.png) no-repeat bottom center;
  198.     background-size: 121px auto;
  199. }
  202. /* -n+2就是选择前面两个元素 */
  204. .nav-items:nth-child(-n+2) {
  205.     border-right: 1px solid #fff;
  206. }
  208. .nav-common:nth-child(1) {
  209.     background: -webkit-linear-gradient(left, #FA5A55, #FA994D);
  210. }
  212. .nav-common:nth-child(2) {
  213.     background: -webkit-linear-gradient(left, #4B90ED, #53BCED);
  214. }
  216. .nav-common:nth-child(3) {
  217.     background: -webkit-linear-gradient(left, #34C2A9, #6CD559);
  218. }
  221. /* subnav-entry */
  223. .subnav-entry {
  224.     display: flex;
  225.     border-radius: 8px;
  226.     background-color: #fff;
  227.     margin: 0 4px;
  228.     flex-wrap: wrap;
  229.     padding: 5px 0;
  230. }
  232. .subnav-entry li {
  233.     /* 里面的子盒子可以写 % 相对于父级来说的 */
  234.     flex: 20%;
  235. }
  237. .subnav-entry a {
  238.     display: flex;
  239.     flex-direction: column;
  240.     align-items: center;
  241. }
  243. .subnav-entry-icon {
  244.     width: 28px;
  245.     height: 28px;
  246.     background-color: pink;
  247.     margin-top: 4px;
  248.     background: url(../images/subnav-bg.png) no-repeat;
  249.     background-size: 28px auto;
  250. }
  253. /* sales-box */
  255. .sales-box {
  256.     border-top: 1px solid #bbb;
  257.     background-color: #fff;
  258.     margin: 4px;
  259. }
  261. .sales-hd {
  262.     position: relative;
  263.     height: 44px;
  264.     border-bottom: 1px solid #ccc;
  265. }
  267. .sales-hd h2 {
  268.     position: relative;
  269.     text-indent: -999px;
  270.     overflow: hidden;
  271. }
  273. .sales-hd h2::after {
  274.     position: absolute;
  275.     top: 5px;
  276.     left: 8px;
  277.     content: "";
  278.     width: 79px;
  279.     height: 15px;
  280.     background: url(../images/hot.png) no-repeat 0 -20px;
  281.     background-size: 79px auto;
  282. }
  284. .more {
  285.     position: absolute;
  286.     right: 5px;
  287.     top: 0px;
  288.     background: -webkit-linear-gradient(left, #FF506C, #FF6BC6);
  289.     border-radius: 15px;
  290.     padding: 3px 20px 3px 10px;
  291.     color: #fff;
  292. }
  294. .more::after {
  295.     content: "";
  296.     position: absolute;
  297.     top: 9px;
  298.     right: 9px;
  299.     width: 7px;
  300.     height: 7px;
  301.     border-top: 2px solid #fff;
  302.     border-right: 2px solid #fff;
  303.     transform: rotate(45deg);
  304. }
  306. .row {
  307.     display: flex;
  308. }
  310. .row a {
  311.     flex: 1;
  312.     border-bottom: 1px solid #eee;
  313. }
  315. .row a:nth-child(1) {
  316.     border-right: 1px solid #eee;
  317. }
  319. .row a img {
  320.     width: 100%;
  321. }

less+rem+媒体查询布局：

  • 什么是rem？rem跟px一样是个单位，相对于html元素字体大小来说的，1rem=html中的字体像素大小，之前学过的em则是相对于父元素的字体大小来说的
  • 优点：可以通过修改html元素文字大小来改变页面中的元素大小，可以整体控制；
  • 什么是媒体查询？媒体查询（media query）是css3的语法
  • 特点：使用@media查询，可以针对不同的媒体类型定义不同的样式；@media可以针对不同屏幕尺寸设置不同的样式；当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面；目前针对很多苹果手机、adroit手机，平板等设备都用到多媒体查询；

  • 语法：@media mediatype and|not|only (media feature){ css code; } 其中mediatype有all（所有设备）、print（打印机和打印预览）、scree（电脑屏幕、平板电脑、智能手机等等）；关键字and（且）、not（非）、only（仅仅只）；media feature（媒体特性width输出设备中页面可见区域的宽度）、min-width（输出设备中页面最小可见区域宽度）、max-width（输出设备中页面最大可见区域宽度）

    1. @media mediatype and|not|only (media feature1) and|not|only(media feature2){
    2. css code;  
    3. }

  • 理解：个人感觉有点像if判断，满足该条件就进入执行里面的样式代码，小于最大可见宽度则满足，大于最小可见宽度则满足

  • 引入页源：

    • 当样式比较频繁时，可以针对不同媒体使用不同stylesheets（样式表）
    • 原理：就是直接在link标签中判断设备的尺寸，然后引入不同的css样式文件
    • 语法：
      1. <link rel="stylesheet" media="mediatype and|not|only(media feature)" href="引入的样式文件路径">

  • less的认识

    • 它是一门css扩展语言，也成为css预处理器，加入了程序式语言的特性，引入了变量、Mixin（混入）、运算及函数等功能，大大简化了css的编写，并且降低了css的维护成本；
    • 官网：http://lesscss.cn/
    • 常见的css预处理器：sass、less、stylus
    • less是一门css预处理器语言，它扩展了css的动态特性；

  • less的使用：

    • 把它编写在后缀名为less的文件中；

    • less变量：@变量名:值; 变量命名规范，不能包含特殊字符，不能以数字开头大小写敏感

      1. //变量书写格式
      2. @变量名：值；
      3. @color:pink;
      4. //变量引用
      5. body{
      6. background-color:@color;
      7. }

    • less编译：将less语句编译成css代码，通过vscode插件——easy less实现；安装好该插件之后，重启vscode即可，之后只要将.less文件保存即可自动编译生成.css文件；


    • less嵌套：后代选择器直接在嵌套写即可；伪类选择器在前面加个“&”即可
    • less运算：直接在less文件中做加减乘除运算即可，两个数有单位且不同则以第一个为准，只有一个数有单位则以有单位的为准，注意，除法运算需要加括号，相关运算函数
      • escape(@string); // 通过 URL-encoding 编码字符串

e(@string); // 对字符串转义
%(@string, values…); // 格式化字符串
unit(@dimension, [@unit: “”]); // 移除或替换属性值的单位
color(@string); // 将字符串解析为颜色值
data-uri([mimetype,] url); // 将资源内嵌到css中，可能回退到url()
ceil(@number); // 向上取整
floor(@number); // 向下取整
percentage(@number); // 将数字转换为百分比，例如 0.5 -> 50%
round(number, [places: 0]); // 四舍五入取整
sqrt(number); // 计算数字的平方根
abs(number); // 数字的绝对值
sin(number); // sin函数
asin(number); // arcsin函数
cos(number); // cos函数
acos(number); // arccos函数
tan(number); // tan函数
atan(number); // arctan函数
pi(); // 返回PI
pow(@base, @exponent); // 返回@base的@exponent次方
mod(number, number); // 第一个参数对第二个参数取余
convert(number, units); // 在数字之间转换
unit(number, units); // 不转换的情况下替换数字的单位
color(string); // 将字符串或者转义后的值转换成颜色
rgb(@r, @g, @b); // 转换为颜色值
rgba(@r, @g, @b, @a); // 转换为颜色值
argb(@color); // 创建 #AARRGGBB 格式的颜色值
hsl(@hue, @saturation, @lightness); // 创建颜色值
hsla(@hue, @saturation, @lightness, @alpha); // 创建颜色值
hsv(@hue, @saturation, @value); // 创建颜色值
hsva(@hue, @saturation, @value, @alpha); // 创建颜色值
hue(@color); // 从颜色值中提取 hue 值（色相）
saturation(@color); // 从颜色值中提取 saturation 值（饱和度）
lightness(@color); // 从颜色值中提取 ‘lightness’ 值（亮度）
hsvhue(@color); // 从颜色中提取 hue 值，以HSV色彩空间表示（色相）
hsvsaturation(@color); // 从颜色中提取 saturation 值，以HSV色彩空间表示（饱和度）
hsvvalue(@color); // 从颜色中提取 value 值，以HSV色彩空间表示（色调）
red(@color); // 从颜色值中提取 ‘red’ 值（红色）
green(@color); // 从颜色值中提取 ‘green’ 值（绿色）
blue(@color); // 从颜色值中提取 ‘blue’ 值（蓝色）
alpha(@color); // 从颜色值中提取 ‘alpha’ 值（透明度）
luma(@color); // 从颜色值中提取 ‘luma’ 值（亮度的百分比表示法）
saturate(@color, 10%); // 饱和度增加 10%
desaturate(@color, 10%); // 饱和度降低 10%
lighten(@color, 10%); // 亮度增加 10%
darken(@color, 10%); // 亮度降低 10%
fadein(@color, 10%); // 透明度增加 10%
fadeout(@color, 10%); // 透明度降低 10%
fade(@color, 50%); // 设定透明度为 50%
spin(@color, 10); // 色相值增加 10
mix(@color1, @color2, [@weight: 50%]); // 混合两种颜色
greyscale(@color); // 完全移除饱和度，输出灰色
contrast(@color1, [@darkcolor: black], [@lightcolor: white], [@threshold: 43%]); // 如果 @color1 的 luma 值 > 43% 输出 @darkcolor，否则输出 @lightcolor
multiply(@color1, @color2);
screen(@color1, @color2);
overlay(@color1, @color2);
softlight(@color1, @color2);
hardlight(@color1, @color2);
difference(@color1, @color2);
exclusion(@color1, @color2);
average(@color1, @color2);
negation(@color1, @color2);
iscolor(@colorOrAnything); // 判断一个值是否是颜色
isnumber(@numberOrAnything); // 判断一个值是否是数字（可含单位）
isstring(@stringOrAnything); // 判断一个值是否是字符串
iskeyword(@keywordOrAnything); // 判断一个值是否是关键字
isurl(@urlOrAnything); // 判断一个值是否是url
ispixel(@pixelOrAnything); // 判断一个值是否是以px为单位的数值
ispercentage(@percentageOrAnything); // 判断一个值是否是百分数
isem(@emOrAnything); // 判断一个值是否是以em为单位的数值
isunit(@numberOrAnything, “rem”); // 判断一个值是否是指定单位的数值
含*号的函数只在1.4.0 beta以上版本中可用

  • rem适配方案：
    • 原理：
      • 让一些不能等比自适应的元素，达到当设备尺寸发生改变时，等比适配当前设备；
      • 使用媒体查询根据不同的设备按比例设置html的字体大小，然后页面元素使用rem单位做尺寸；当html字体大小变化时元素尺寸也发生变化，从而达到等比缩放的适配效果
    • 总结：按照设计稿与设备宽度的比例，动态计算并设置html根标签的font-size大小；（媒体查询）；css中，设计稿元素的宽、高、相对位置等取值按照同比例换算为rem为单位的值；
    • 方案一：
      • less
      • 媒体查询
      • rem
      • 实现：①假设设计稿是750px；假设我们把整个屏幕分为15等分（划分标准不一定可以是20份也可以是10等分）；②每一份作为html字体大小，这里就是50px；③那么在320ppx的设备时，字体带线啊哦为320/15就是21.33px；④用我们页面元素的大小除以不同的html字体大小会发现他们是等比例缩放的；
      • 最终公式：页面元素的rem值 = 页面元素值（px） / （屏幕宽度 / 划分的份数）； 其中：屏幕宽度 / 划分的份数 = html的font-size
      • 苏宁首页案例：
      • common.less文件 ```less // 设置常见的屏幕尺寸 修改里面的html文字大小 a { text-decoration: none; } // 一定要写到最上面 html { font-size: 50px; } // 我们此次定义的划分的份数 为 15 @no: 15; // 320 @media screen and (min-width: 320px) { html { font-size: 320px / @no; } } // 360 @media screen and (min-width: 360px) { html { font-size: 360px / @no; } } // 375 iphone 678 @media screen and (min-width: 375px) { html { font-size: 375px / @no; } }

// 384 @media screen and (min-width: 384px) { html { font-size: 384px / @no; } }

// 400 @media screen and (min-width: 400px) { html { font-size: 400px / @no; } } // 414 @media screen and (min-width: 414px) { html { font-size: 414px / @no; } } // 424 @media screen and (min-width: 424px) { html { font-size: 424px / @no; } }

// 480 @media screen and (min-width: 480px) { html { font-size: 480px / @no; } }

// 540 @media screen and (min-width: 540px) { html { font-size: 540px / @no; } } // 720 @media screen and (min-width: 720px) { html { font-size: 720px / @no; } }

// 750 @media screen and (min-width: 750px) { html { font-size: 750px / @no; } }

  2.          - index.css
  3. ```css
  4. // 首页的样式less文件
  5. @import "common";
  6. // @import 导入的意思 可以把一个样式文件导入到另外一个样式文件里面
  7. // link 是把一个 样式文件引入到 html页面里面
  8. body {
  9.     min-width: 320px;
  10.     width: 15rem;
  11.     margin: 0 auto;
  12.     line-height: 1.5;
  13.     font-family: Arial,Helvetica;
  14.     background: #F2F2F2;
  15. }
  16. // 页面元素rem计算公式： 页面元素的px / html 字体大小 50
  17. // search-content
  18. @baseFont: 50;
  19. .search-content {
  20.     display: flex;
  21.     position: fixed;
  22.     top: 0;
  23.     left: 50%;
  24.     transform: translateX(-50%);
  25.     width: 15rem;
  26.     height: 88rem / @baseFont;
  27.     background-color:#FFC001;
  28.     .classify {
  29.         width: 44rem / @baseFont;
  30.         height: 70rem / @baseFont;
  31.         margin: 11rem / @baseFont 25rem / @baseFont 7rem / @baseFont 24rem / @baseFont;
  32.         background: url(../images/classify.png) no-repeat;
  33.         // 背景缩放
  34.         background-size: 44rem / @baseFont 70rem / @baseFont;
  35.     }
  36.     .search {
  37.         flex: 1;
  38.         input {
  39.             outline: none;
  40.             width: 100%;
  41.             border: 0;
  42.             height: 66rem / @baseFont;
  43.             border-radius: 33rem / @baseFont;
  44.             background-color:#FFF2CC;
  45.             margin-top: 12rem / @baseFont;
  46.             font-size: 25rem / @baseFont;
  47.             padding-left: 55rem / @baseFont;
  48.             color: #757575;
  49.         }
  50.     }
  51.     .login {
  52.         width: 75rem / @baseFont;
  53.         height: 70rem / @baseFont;
  54.         line-height: 70rem / @baseFont;
  55.         margin: 10rem / @baseFont;
  56.         font-size: 25rem / @baseFont;
  57.         text-align: center;
  58.         color: #fff;
  60.     }
  61. }
  63. // banner
  64. .banner {
  65.     width: 750rem / @baseFont;
  66.     height: 368rem / @baseFont;
  67.     img {
  68.         width: 100%;
  69.         height: 100%;
  70.     }
  71. }
  72. // ad
  73. .ad {
  74.     display: flex;
  75.     a {
  76.         flex: 1;
  77.         img {
  78.             width: 100%;
  79.         }
  80.     }
  81. }
  82. // nav
  83. nav {
  84.     width: 750rem / @baseFont;
  85.     a {
  86.         float: left;
  87.         width: 150rem / @baseFont;
  88.         height: 140rem / @baseFont;
  89.         text-align: center;
  90.         img {
  91.             display: block;
  92.             width: 82rem / @baseFont;
  93.             height: 82rem / @baseFont;
  94.             margin: 10rem / @baseFont auto 0;
  95.         }
  96.         span {
  97.             font-size: 25rem / @baseFont;
  98.             color: #333;
  99.         }
  100.     }
  101. }
  1.      - index.html
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <link rel="stylesheet" href="css/normalize.css">
  9.     <link rel="stylesheet" href="css/index.css">
  10.     <title>Document</title>
  11. </head>
  13. <body>
  14.     <!-- 顶部搜索框 -->
  15.     <div class="search-content">
  16.         <a href="#" class="classify"></a>
  17.         <div class="search">
  18.             <form action="">
  19.                 <input type="search" value="厨卫保暖季 哒哒哒">
  20.             </form>
  21.         </div>
  22.         <a href="#" class="login">登录</a>
  23.     </div>
  24.     <!-- banner部分 -->
  25.     <div class="banner">
  26.         <img src="upload/banner.gif" alt="">
  27.     </div>
  28.     <!-- 广告部分 -->
  29.     <div class="ad">
  30.         <a href="#"><img src="upload/ad1.gif" alt=""></a>
  31.         <a href="#"><img src="upload/ad2.gif" alt=""></a>
  32.         <a href="#"><img src="upload/ad3.gif" alt=""></a>
  33.     </div>
  34.     <!-- nav模块 -->
  35.     <nav>
  36.         <a href="#">
  37.             <img src="upload/nav1.png" alt="">
  38.             <span>爆款手机</span>
  39.         </a>
  40.         <a href="#">
  41.             <img src="upload/nav1.png" alt="">
  42.             <span>爆款手机</span>
  43.         </a>
  44.         <a href="#">
  45.             <img src="upload/nav1.png" alt="">
  46.             <span>爆款手机</span>
  47.         </a>
  48.         <a href="#">
  49.             <img src="upload/nav1.png" alt="">
  50.             <span>爆款手机</span>
  51.         </a>
  52.         <a href="#">
  53.             <img src="upload/nav1.png" alt="">
  54.             <span>爆款手机</span>
  55.         </a>
  56.         <a href="#">
  57.             <img src="upload/nav1.png" alt="">
  58.             <span>爆款手机</span>
  59.         </a>
  60.         <a href="#">
  61.             <img src="upload/nav1.png" alt="">
  62.             <span>爆款手机</span>
  63.         </a>
  64.         <a href="#">
  65.             <img src="upload/nav1.png" alt="">
  66.             <span>爆款手机</span>
  67.         </a>
  68.         <a href="#">
  69.             <img src="upload/nav1.png" alt="">
  70.             <span>爆款手机</span>
  71.         </a>
  72.         <a href="#">
  73.             <img src="upload/nav1.png" alt="">
  74.             <span>爆款手机</span>
  75.         </a>
  77.     </nav>
  78. </body>
  80. </html>
  1.   - 方案二（推荐）：
  2.      - flexble.js
  3.      - rem
  4.      - 网址：https://github.com/amfe/lib-flexible

（2）技术选型——响应式页面兼容移动端（其次）

  • 响应式页面是根据浏览器的宽度进行实时样式改变，这种方式要花费大量精力编写浏览器兼容的样式代码

  • 原理：使用媒体查询针对不同的宽度的设备进行布局和样式的设置，从而适配不同的设备； | 设备划分 | 尺寸区间 | | —- | —- | | 超小屏幕（手机） | width<768px | | 小屏设备（平板） | 768px<=width<992px | | 中等屏幕（桌面显示器） | 992px<=width<1200px | | 宽屏设备（大桌名设备显示器） | width>=1200px |

  • 媒体查询布局：

    • 准备一个父级作为布局容器，来配合自己元素实现变化效果。原理就是在不同的屏幕下，通过媒体查询的方式来改变这个布局容器的大小，再改变子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化；
    • 超小屏幕：设置布局容器宽度为100%；
    • 小屏幕：设置布局容器宽度为750px；
    • 中等屏幕：设置布局容器宽度为970px；
    • 大屏幕：设置布局容器宽度为1170px；
  • bootstarp：来自于推特；是目前最受欢迎的前端框架，它基于html、css和javascript的，简介灵活的特性使得web开发更加快捷
  • 中文官网：http://www.bootcss.com
  • 官网：http://getbootstrap.com
  • 推荐网址：http://bootstrap.css88.com

  • 栅格系统：

    • 其用于通过一系列的行（row）和列（column）的组合来创建页面布局 | | 超小屏幕 | 小屏幕 | 中等屏幕 | 大屏幕 | | —- | —- | —- | —- | —- | | .container的最大宽度 | 设置布局容器宽度为100% | 设置布局容器宽度为750px | 设置布局容器宽度为970px | 设置布局容器宽度为1170px | | 类前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg | | 列数（column） | 12列 | | | |