响应式网站开发实战

效果图

效果图

响应式网站设计是一种网络页面设计布局，其理念是：集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境进行相对应的布局。

简单的可以这样理解，响应式网站可以根据不同的设备进行相对应的布局，比如有PC端，平板端，手机端。

响应式网站的优点

减少工作量

① 网站、设计、代码、内容都只需要一份
② 多出来的工作量只是JS脚本、CSS样式做一些修改

节约时间
每个设备都能得到正确的设计
搜索优化

响应式网站的缺点

会加载更多的样式和脚本资源
设计比较难精确定位和控制
老版本的浏览器兼容不好

浏览器的使用比例统计

媒体查询（CSS2开始出现）

CSS2

media="screen"在屏幕显示

<link rel="stylesheet" href="css/main.css" media="screen">

media="print"在打印显示

<link rel="stylesheet" href="css/main.css" media="screen">

CSS3 （新增很多媒体类型和函数）

例如：

@nedia all and (min-width:800px) {
...
}

CSS3 媒体属性简介
width:视口宽度
height:视口高度
device-width:渲染表面的宽度，就是设备的宽度
device-height:渲染表面的高度，就是设备的高度

orientation:检查设备处于横向还是纵向
aspect-ratio:基于视口宽度和高度的宽高比。（width/height如: 16/9, 4/3）
device-aspect-ratio:渲染表面的宽度,就是设备屏幕的宽度。
color:每种颜色的位数bits 如: min-color: 16位，8位
resolution: 检测屏幕或打印机的分辨率（如: min-resolution: 300dpi）

viewport 视口

布局视口（layout viewport）
原先网站的布局视口就是布局视口
可视视口（visual viewport）
设备看到的区域就是可视视口
理想视口（ideal viewport）
布局视口在一个设备上的最近尺寸就是理想视口

使用理想视口需要添加以下标签

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

这个标签的意思是:
我要使用理想视口，
理想视口的宽度要作为布局视口的宽度，
最小的缩放比例，
最大的缩放比例，
禁止了用户缩放

开发前的准备

怎么分析设计图

断点的选择

断点的选择断点的选择

开始编码大屏幕的设备


<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 使用UTF-8编码方式 最好写在head第一行 -->
    <meta charset="UTF-8">
    <title>Title</title>
    <!--兼容ie浏览器：表示强制已最新的ie浏览器渲染 -->
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <!-- 指定该属性，布局视口成为理想视口 initial-scale 初始缩放比例为1 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!--[if lte IE 8]>
<p class="browserupgrade">
    你的浏览器版本太老了，请到
    <a 
        这里
    </a>
    更新，以获取最佳体检
</p>
<![enif] -->

<!-- id 一般用于JS快速的区别和获取元素class
一般都用中横线分隔, id一般都使用驼峰命名法 -->

<header>
    <nav class="main-top" id="mainTop"></nav>
</header>

</body>
</html>

设置PC端的样式的准备工作

px em rem

px （1px相当于1个像素，手机的分辨率）
em 相对的长度单位

① em相对参照物为父元素的font-size
② em具有继承的特点
③ 当没有设置font-size时，浏览器会有一个默认的em设置：1em = 16px

em 的缺点:容易混乱

rem 相对的长度单位

① rem的相对参照物为根元素的html，相当于参照物固定不变，所以比较好计算
② 当没有设置font-size时，浏览器会有一个默认的em设置：1em = 16px

rem

node.js启动server服务

安装http-server

npm install http-server -g

http-server 本地路径

查看帮助，可使用使用以下命令：

http-server -h  /  http-server --help

如果想改变端口和地址采用如下方式：

http-server 本地路径 -a 0.0.0.0 -p 8080

参数-a是监听地址，而参数-p是修改监听端口。

响应式网站开发实战

响应式网站的优点

减少工作量

节约时间

每个设备都能得到正确的设计

搜索优化

响应式网站的缺点

会加载更多的样式和脚本资源

设计比较难精确定位和控制

老版本的浏览器兼容不好