写响应式网站需要具备哪些知识

对于要写一个响应式网站，首先要知道什么是响应式。

响应式网页就是一个网站能兼容多个终端，而不是为每个终端做一个版本。

一、响应式就是根据不同的屏幕尺寸，一个网页所展现的布局内容会有所变化，在css中可以使用媒体查询，使用方法如下：

@media 媒体类型 and 媒体特征 { 样式 }  

例：@media screen and (min-width:760px ) and (max-width:980px) {

    /*css样式*/

...

}

媒体类型包括：all（所有设备类型）、screen（电脑屏幕）、handheld（手持设备）、tv（电视类型设备）

媒体特征包括：浏览器窗口的宽高(width and height)、屏幕的宽高(width and height)、屏幕方向(landscape or portrait)

二、在写响应式网页中往往需要在head中加入一句话来保持原始字体大小，并且不允许网页缩放：

<meta     name="viewport"content="width=device-width,user-scalable=0,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"/>

Iphone手机在渲染网页时对于一串数字都会高亮显示，标示可以点击这段数字拨打电话，但往往备案号也蓝色高亮非常难看，加入这个单面就能解决：

<meta name="format-detection" content="telephone=no" />

三、在写响应式的时候因为页面需要兼容不同屏幕，所以布局也十分重要。可切换的固定布局、弹性布局、混合布局都是目前可被采用的响应式布局方式。每个布局方式都有优缺点，可以根据页面想要实现的效果来选择对应的布局方式

四、响应式网站的宽度是不固定的，在css中可以使用百分比代替像素。在处理图片时可以给图片指定的最大宽度为百分比，那么在图片过大时就会缩小，小了就会按照原尺寸输出。图片自适应的方法：img{ max-width:100% } ;