仿星巴克页面响应式布局

因为越来越多的智能移动设备（ mobile, tablet device ）加入到互联网中来，移动互联网不再是独立的小网络了，而是成为了 Internet 的重要组成部分。响应式网络设计 （ RWD / AWD）的出现，目的是为移动设备提供更好的体验，并且整合从桌面到手机的各种屏幕尺寸和分辨率，用技术来使网页适应从小到大（现在到超大）的不同分辨率的屏幕

 属性            大小     日期    时间   名称
----------- ---------  ---------- -----  ----
     目录           0  2020-10-13 09:45  星巴克\
     目录           0  2020-10-13 09:45  星巴克\css\
     文件        1367  2020-10-13 09:35  星巴克\css\madio.css
     文件         934  2020-10-13 09:35  星巴克\css\madio.min.css
     文件        1860  2020-10-13 09:35  星巴克\css\madio.scss
     文件         595  2020-10-13 09:35  星巴克\css\reset.css
     文件         433  2020-10-13 09:35  星巴克\css\reset.min.css
     文件         617  2020-10-13 09:35  星巴克\css\reset.scss
     文件        5632  2020-10-13 09:35  星巴克\css\style.css
     文件        4272  2020-10-13 09:35  星巴克\css\style.min.css
     文件        7249  2020-10-13 09:35  星巴克\css\style.scss
     目录           0  2020-10-13 09:45  星巴克\img\
     文件      110011  2020-10-13 09:35  星巴克\img\1.jpg
     文件      101461  2020-10-13 09:35  星巴克\img\2.jpg
     文件       71347  2020-10-13 09:35  星巴克\img\3.jpg
     文件      276979  2020-10-13 09:35  星巴克\img\4.jpg
     文件       62221  2020-10-13 09:35  星巴克\img\5.jpg
     文件       41737  2020-10-13 09:35  星巴克\img\6.jpg
     文件      101749  2020-10-13 09:35  星巴克\img\coffee-1.jpg
     文件      157173  2020-10-13 09:35  星巴克\img\coffee-2.jpg
     文件      185738  2020-10-13 09:35  星巴克\img\coffee-3.jpg
     文件       30637  2020-10-13 09:35  星巴克\img\coffee-4.jpg
     文件        1617  2020-10-13 09:35  星巴克\img\icon-account（1）.svg
     文件        2055  2020-10-13 09:35  星巴克\img\icon-account-active.svg
     文件        1617  2020-10-13 09:35  星巴克\img\icon-account.svg
     文件         919  2020-10-13 09:35  星巴克\img\icon-hamburger.svg
     文件        1233  2020-10-13 09:35  星巴克\img\icon-home-active.svg
     文件        1267  2020-10-13 09:35  星巴克\img\icon-home.svg
     文件        1920  2020-10-13 09:35  星巴克\img\icon-menu-active.svg
     文件        2649  2020-10-13 09:35  星巴克\img\icon-menu.svg
     文件        1568  2020-10-13 09:35  星巴克\img\icon-more-active.svg
............此处省略16个文件信息