编写响应式网站的几点注意事项

屏幕的大小

开始的开始，声明viewport标签

大多数移动浏览器将HTML页面放大为宽的视图（viewport）以符合屏幕分辨率。你可以使用视图的meta标签来进行重置。下面的视图标签告诉浏览器，使用设备的宽度作为视图宽度并禁止初始的缩放。在标签里加入这个meta标签。

<meta name="viewport" content="width=device-width,init-scale=1,user-scalable=0" />

了解各设备的屏幕大小**

1. 当屏幕宽度大于900px的时候，即大型电脑PC端
=》正常css
2. 当屏幕最小宽度为900px时，相当于笔记本PC端

@media screen and (min-width:900px){

}

3. 当屏幕宽度在600~900px时，相当于平板电脑大小的设备

@media screen and (min-width:600px) and (max-width:900px){

}

4. 当屏幕宽度在小于等于600px时，即在移动端（手机端）

@media screen and (max-width:600px){

}

元素的宽度

不使用绝对的宽度,元素的宽度使用百分比

字体

字体,要使用倍率, em

布局,定位

采用流式布局,浮动定位 float属性

图片大小

给图片设置最大宽度，让其自适应。
简单的解决方法可以使用百分比，但这样不友好，会放大或者缩小图片。那么可以尝试给图片指定的最大宽度为百分比。假如图片超过了，就缩小。假如图片小了，就原尺寸输出。
img{
max-width:100%
}

善用::before和::after伪元素 +content 属性

<img src="image.jpg"
     data-src-600px="image-600px.jpg"
     data-src-800px="image-800px.jpg"
     alt="">
@media (min-device-width:600px) {
    img[data-src-600px] {
        content: attr(data-src-600px, url);
    }
}

//css
@media (min-device-width:800px) {
    img[data-src-800px] {
        content: attr(data-src-800px, url);
    }
}