仿苹果响应式官网（含代码！）_NOT FOUND 404!

网络投稿 02-07 4243

一、响应式开发原理 1.1 响应式开发原理

就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。

设备的划分情况：

+ 小于768的为超小屏幕（手机） + 768~992之间的为小屏设备（平板） + 992~1200的中等屏幕（桌面显示器） + 大于1200的宽屏设备（大桌面显示器） 1.2 响应式布局容器

响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果。

原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。

父容器版心的尺寸划分

+ 超小屏幕（手机，小于 768px）：设置宽度为 100% + 小屏幕（平板，大于等于 768px）：设置宽度为 750px + 中等屏幕（桌面显示器，大于等于 992px）：宽度设置为 970px + 大屏幕（大桌面显示器，大于等于 1200px）：宽度设置为 1170px

但是我们也可以根据实际情况自己定义划分

二、怎样使用media

Media所有参数汇总 width:浏览器可视宽度。 height:浏览器可视高度。 device-width:设备屏幕的宽度。 device-height:设备屏幕的高度。 orientation:检测设备目前处于横向还是纵向状态。(landscape/portrait) aspect-ratio:检测浏览器可视宽度和高度的比例。(例如：aspect-ratio:16/9) device-aspect-ratio:检测设备的宽度和高度的比例。 color:检测颜色的位数。（例如：min-color:32就会检测设备是否拥有32位颜色，向所有能显示颜色的设备应用样式表） color-index:检查设备颜色索引表中的颜色，他的值不能是负数。 monochrome:检测单色楨缓冲区域中的每个像素的位数。（这个太高级，估计咱很少会用的到） resolution:检测屏幕或打印机的分辨率。(例如：min-resolution:300dpi或min-resolution:118dpcm)。 grid:检测输出的设备是网格的还是位图设备，如果设备是基于网格的（例如电传打字机终端或只能显示一种字形的电话），该值为1，否则为0

1)首先需要在html文档中添加以下代码，用来兼容移动设备的显示效果

2)怎样在CSS文件中写CSS响应式媒体查询

例: @media screen and (max-width:720px) and (min-width:320px){ body{ background-color:red; } } @media screen and (max-width:320px){ body{ background-color:blue; } } 三、响应式设计

四、最终实现效果

五、具体实现（代码） <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/style.css"/> </head> <body>  <div class="header"> <div class="header-main"> <广告> </div> </div>  <div class="nav"> <div class="nav-main"> <a href="" class="logo"></a> <a href="" class="nav-item">Mac</a> <a href="" class="nav-item">iPad</a> <a href="" class="nav-item">iPhone</a> <a href="" class="nav-item">Watch</a> <a href="" class="nav-item">Music</a> <a href="" class="nav-item">技术支持</a> <div class="search"></div> <div class="shop-bag"></div> </div> <div class="nav-mobile"> <input type="checkbox" name="" id="menu-check" value="" style="display: none;"/> <label href="" class="mobile-list" for="menu-check"> <div class="line"></div> <div class="line"></div> </label> <a href="" class="logo"></a> <a href="" class="shop-bag"></a> <div class="menu"> <div class="searchInput"> <span class="icon"></span> <span type="" name="" id="" value="" class="input" />搜索 apple.com.cn</span> </div> <div class="menulist"> <a href="" class="menu-item">Mac</a> <a href="" class="menu-item">iPad</a> <a href="" class="menu-item">iPhone</a> <a href="" class="menu-item">Watch</a> <a href="" class="menu-item">Music</a> <a href="" class="menu-item">技术支持</a> </div> </div> </div> </div>  <div class="ad"> <div class="buylink"><a href="https://·/shop">在线选购</a></div> <div class="ad-text">，享受免费送货、Specialist 专家支持、免息分期等服务。</div> </div>  <div class="goods" id="iPhone12"> <div class="goods-name">iPhone 12</div> <div class="goods-advantage">升维大提速</div> <div class="price-introduction"> <div>RMB 229/月或 RMB 5499 起，</div> <div class="introduce">还可折抵换购<span class="shangbiao">1</span></div> </div> <div class="buy-link"> <a class="buy-link-text" href="https://·/iphone-12/">进一步了解</a> <a href="https://·/iphone-12/"> <div class="jiantou"></div> </a> <a class="buy-link-text" href="https://·/shop/buy-iphone/iphone-12">购买</a> <a href="https://·/shop/buy-iphone/iphone-12"> <div class="jiantou"></div> </a> </div> </div> <div class="goods" id="iphone12-pro"> <div class="goods-name">iPhone 12</div> <div class="goods-advantage">升维大提速</div> <div class="price-introduction"> <div>RMB 229/月或 RMB 5499 起，</div> <div class="introduce">还可折抵换购<span class="shangbiao">1</span></div> </div> <div class="buy-link"> <a class="buy-link-text" href="https://·/iphone-12/">进一步了解</a> <a href="https://·/iphone-12/"> <div class="jiantou"></div> </a> <a class="buy-link-text" href="https://·/shop/buy-iphone/iphone-12">购买</a> <a href="https://·/shop/buy-iphone/iphone-12"> <div class="jiantou"></div> </a> </div> </div> <div class="goods" id="hero_ipad_pro"> <div class="goods-name">iPhone 12</div> <div class="goods-advantage">由Apple M1 芯片强势驱动</div> <div class="buy-link"> <a class="buy-link-text" href="https://·/iphone-12/">进一步了解</a> <a href="https://·/iphone-12/"> <div class="jiantou"></div> </a> <a class="buy-link-text" href="https://·/shop/buy-iphone/iphone-12">购买</a> <a href="https://·/shop/buy-iphone/iphone-12"> <div class="jiantou"></div> </a> </div> </div>  <div class="goods-classify"> <div class="classify-content"> <div class="classify-item" id="promo_imac"> <div class="classify-item-title"></div> <div class="classify-item-content"></div> <div class="classify-item-link"></div> </div> </div> <div class="classify-content"> <div class="classify-item" id="promo_watch"> <div class="classify-item-title"></div> <div class="classify-item-content"></div> <div class="classify-item-link"></div> </div> </div> <div class="classify-content"> <div class="classify-item" id="promo_spatial"> <div class="classify-item-title"></div> <div class="classify-item-content"></div> <div class="classify-item-link"></div> </div> </div> <div class="classify-content"> <div class="classify-item" id="promo_airtag"> <div class="classify-item-title"></div> <div class="classify-item-content"></div> <div class="classify-item-link"></div> </div> </div> <div class="classify-content"> <div class="classify-item" id="tile_ios15"> <div class="classify-item-title"></div> <div class="classify-item-content"></div> <div class="classify-item-link"></div> </div> </div> <div class="classify-content"> <div class="classify-item" id="promo_ipados"> <div class="classify-item-title"></div> <div class="classify-item-content"></div> <div class="classify-item-link"></div> </div> </div> </div> </body> </html> *{ margin: 0; padding: 0; box-sizing: border-box; } body{ font-family: "SF Pro SC","HanHei SC","SF Pro Text","Myriad Set Pro","SF Pro Icons","PingFang SC", "Helvetica Neue","Helvetica","Arial",sans-serif; padding-top: 84px; } /* 头部 */ .header{ min-width: 330px; width: 100%; background-color: #444444; position: fixed; top: 0; left: 0; z-index: 10; } .header-main{ width: 100%; max-width: 976px; height: 40px; margin: 0 auto; display: flex; flex-direction: row-reverse; align-items: center; font-size: 12px; color: #a8a8aa; } /* 导航栏 */ .nav{ width: 100%; background-color: rgba(0,0,0,0.92); position: fixed; top: 40px; left: 0; z-index: 10; } .nav-main{ width: 100%; max-width: 1000px; height: 44px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; } .nav-main a{ color: #f5f5f7; font-size: 14px; font-weight: 100; text-decoration: none; opacity: 0.8; } .nav-main a:hover{ opacity: 1; color: #FFFFFF; } .logo{ width: 44px; height: 44px; background-image: url(../../image/apple/apple-image.svg); background-position: center; background-repeat: no-repeat; background-size: contain; opacity: 0.8; z-index: 10; } .logo:hover{ opacity: 1; } .search{ width: 18px; height: 44px; background-image: url(../../image/apple/search-image.svg); background-position: top; background-repeat: no-repeat; background-size: 18px auto; background-position: 0px -44px; } .search:hover{ background-size: 18px auto; background-position: 0px 0px; } .shop-bag{ width: 44px; height: 44px; background-image: url(../../image/apple/bag_image.svg); background-position: center; background-repeat: no-repeat; background-size: contain; opacity: 0.8; } .shop-bag:hover{ opacity: 1; } /* 手机导航 */ .nav-mobile{ min-width: 330px; width: 100%; height: 44px; display: none; justify-content: space-between; align-items: center; font-size: 12px; } .mobile-list{ width: 44px; height: 44px; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 10; } .mobile-list .line{ width: 15px; height: 1px; background-color: #FFFFFF; opacity: 0.6; transition: all 0.5s; } .mobile-list:hover .line{ opacity: 1; } #menu-check:checked~.mobile-list .line:first-child{ transform: rotate(45deg) translateY(5px); } #menu-check:checked~.mobile-list .line:last-child{ transform: rotate(-45deg) translateY(-4px); } #menu-check:checked~.shop-bag{ background: none; } .mobile-list .line:first-child{ margin-bottom: 5px; } .menu{ min-width: 330px; width: 100vw; height: 0vh; position: fixed; left: 0; top: 40px; background-color: #000000; padding: 48px 10px; display: none; flex-direction: column; align-items: center; overflow: hidden; } .searchInput{ max-width: 580px; width: 100%; height: 34px; border-radius: 8px; background-color: rgba(110, 110, 115,0.3); padding: 0 10px; display: flex; justify-content: space-between; align-items: center; } .searchInput .icon{ width: 30px; height: 36px; background-image: url(../../image/apple/search-image.svg); background-position: top; background-repeat: no-repeat; background-size: 18px auto; background-position: 0px -44px; margin-top: -7px; } .searchInput .input{ display: inline-block; height: 30px; background-color: transparent; border: none; flex: 1; font-size: 17px; color: rgb(110, 110, 115); line-height: 30px; } .menulist{ max-width: 580px; width: 100%; display: flex; flex-direction: column; justify-content: center; padding-top: 60px; position: relative; } .menulist::before{ position: absolute; content: "快速链接"; left: 0; top: 30px; color: #FFFFFF; font-size: 12px; opacity: 0.4; } .menulist a{ text-decoration: none; } .menu-item{ width: 100%; height: 44px; padding: 13px 0; font-size: 17px; color: #FFFFFF; font-weight: 400; opacity: 0.8; border-bottom: 1px solid #424245; } .menu-item:last-child{ border-bottom: none; } #menu-check:checked~.menu{ display: flex; /* 动画名:swiperdown,时间:0.6s,执行1次,停留在最后效果 */ animation: swiperdown 0.6s 1 forwards; } @keyframes swiperdown{ from{ height: 0; } to{ height: 100vh; } } /* 广告 */ .ad{ min-width: 330px; width: 100%; height: 44px; display: flex; flex-direction: row; justify-content: center; align-items: center; background-color: #00008B; font-size: 12px; background-color: rgb(245, 245, 247); } .buylink a{ text-decoration: none; color: rgb(0, 102, 204); } .buylink:hover{ text-decoration: underline; } .ad-text{ color: rgb(29, 29, 31); } /* 商品 */ .goods{ min-width: 330px; width: 100%; height: 580px; background-position: center; background-repeat: no-repeat; background-size: cover; background-color: #fbfbfd; display: flex; flex-direction: column; align-items: center; margin-bottom: 10px; } .goods-name{ font-size: 53px; font-weight: bold; margin-top: 50px; } .goods-advantage{ margin-top: 6px; font-size: 25px; } .price-introduction{ font-size: 16px; margin-top: 15px; opacity: 0.6; text-align: center; } .introduce{ margin-left: calc(50% - 60px); width: 120px; margin-top: 3px; } .shangbiao{ font-size: 8px; float: right; top: 0; left: 0; } .buy-link{ padding: 5px; width: 220px; margin-top: 20px; display: flex; font-size: 20px; justify-content: space-between; } .buy-link a{ font-size: 18px; text-decoration: none; color: #0066cc; } .buy-link .buy-link-text:hover{ text-decoration: underline; } .jiantou{ width: 10px; height: 10px; transform: translateX(-15px) translateY(8px) rotate(45deg); border-top: 2px solid #0066cc; border-right: 2px solid #0066cc; } #iPhone12{ background-image: url(../../image/apple/iphone_12.jpg); } #iphone12-pro{ background-image: url(../../image/apple/iphone_12_pro.jpg); background-color: #000000; color: #FFFFFF; } #hero_ipad_pro{ background-image: url(../../image/apple/hero_ipad_pro.jpg); background-color: #000000; color: #FFFFFF; } @media all and (max-width:760px){ .nav-mobile{ display: flex; } .nav-main{ display: none; } .goods-name{ font-size: 33px; font-weight: bold; } .goods-advantage{ font-size: 16px; } .price-introduction{ font-size: 12px; } .introduce{ margin-left: calc(50% - 50px); } .shangbiao{ font-size: 5px; padding-right: calc(50% - 25px); } .buy-link{ width: 160px; margin-top: 10px; } .buy-link a{ font-size: 14px; } .jiantou{ width: 8px; height: 8px; transform: translateX(-8px) translateY(6px) rotate(45deg); border-top: 1.5px solid #0066cc; border-right: 1.5px solid #0066cc; } #iPhone12{ height: 500px; background-image: url(../../image/apple/iphone_12_2.jpg); } #iphone12-pro{ height: 500px; background-image: url(../../image/apple/iphone_12_pro2.jpg); background-color: #000000; color: #FFFFFF; } #hero_ipad_pro{ height: 500px; background-image: url(../../image/apple/hero_ipad_pro2.jpg); } } /* 产品分类 */ .goods-classify{ min-width: 330px; width: 100%; display: flex; /* justify-content: space-evenly; */ flex-wrap: wrap; overflow: hidden; } .classify-content{ width: 50%; padding: 0 10px; margin-bottom: 10px; } .classify-item{ width: 100%; height: 580px; background-position: center; background-repeat: no-repeat; background-size: cover; } #promo_imac{ background-image: url(../../image/apple/promo_imac.jpg); } #promo_watch{ background-image: url(../../image/apple/promo_watch.jpg); } #promo_spatial{ background-image: url(../../image/apple/promo_spatial.jpg); } #promo_airtag{ background-image: url(../../image/apple/promo_airtag.jpg); } #tile_ios15{ background-image: url(../../image/apple/tile_ios15.jpg); } #promo_ipados{ background-image: url(../../image/apple/promo_ipados.jpg); } @media all and (max-width:1050px) { .goods{ height: 650px; } #promo_imac{ background-image: url(../../image/apple/promo_imac2.jpg); } #promo_watch{ background-image: url(../../image/apple/promo_watch2.jpg); } } @media all and (max-width:645px) { .classify-content{ width: 100%; } }