什么是响应式网站

• 响应式网站就是一个网站在不同的设备上能呈现多种样式，能适配多种屏幕，能跟随屏幕的大小改变，而改变样式，展示最好的状态给用户查看，这就是响应式网站。

网站搭建流程

从上之下
从外到内

网站logo

• 网站logo在网站中的位置很重要，我们也希望搜索引擎收率它，所以一般来说都会把logo放在h1标签之中

网站banner图

• 关于网站的banner图，一般来说我们是需要两张图片以上进行轮播的，所以最好使用ul来包裹住，并且下面的结构应为li>(a>img)

关于伸缩容器

1. 如果说在伸缩容器中伸缩项太宽了，导致伸缩项超出了屏幕的大小，那么原因则是因为伸缩项的总宽度超出了伸缩容器的宽度，所以就会这个样子，解决办法就是在伸缩项中添加overflow:hidden
   2.如果伸缩项中的图片大于伸缩项，那么如果想要让图片居中的话，则需要给伸缩项添加position:relative进行相对定位，然后给需要居中的图片添加position:absolute进行相对定位，然后left:50%,再设置transform: translateX(-50%);即可；

媒体查询注意点

• 如果要使用媒体查询，那么应该使用外链样式表
• 如果要使用媒体查询，那么请一定准守下面的写法

    <link rel="stylesheet" href="css/index.css"> /*电脑端*/
    /*开始的第一张样式表不要设置什么宽度可以使用，因为设置了的话，会造成下面的样式表写不必要的冗余代码，让第一张样式表在任何宽度都可以使用的话，那么就可以利用css的层叠性来减少冗余代码了*/
    <link rel="stylesheet" href="css/index.pad.css" media="screen and (max-width:1200px)">  /*pad端*/
    <link rel="stylesheet" href="css/index.phone.css" media="screen and (max-width:768px)"> /*手机端*/
    /*请一定要按照电脑>pad>手机的书写格式来书写，这样子可以避免很多的错误*/

• 在使用媒体查询的时候，请一定使用浏览器的开发者工具来选择选择器，而不要自已手写选择器，如果手写选择器的话，那么将有可能造成不必要的错。
  

  开发者工具

• 一般来说，复杂的网站请不要使用媒体查询，媒体查询请用在简单的网页上面。