一键拥有10个城市分站
关键词免费占领百度首页
200
HTML5教程丨3个步骤让你的网站变成响应式网站
时间: 2016-12-05 14:25:30 点击数: 41287 来源: 耐思智慧
一个网站长得好看能吃吗？还真能！一个“秀色可餐”的网站不仅能增加人们的食欲，还能让你的营业额蹭蹭往上涨！但是，一个长得好看却只能活在电脑端的网站，真的不能吃！2016年，已经有超过80%的网民有在移动端购物的经历，如果你的网站不能在移动端“颜值在线”，就别怪客户都被别家揽走了！
解决的办法只有一个，就是把自家网站做成响应式的。要么也可以另外开发移动站。要把网站变成响应式网站，给大家说三个简单的步骤。
1.布局
在建响应式布局的时候，最好先建一个非响应式的布局，测试没问题后，再把布局改成响应式的，添加响应式代码和媒体查询。
在HTML页面的<head>和</head>标签之间复制以下代码：
媒体查询的意思是根据不同设备设置不同的布局样式。媒体查询取决于网站布局，我们可以这样定义：第一个，适合平板电脑横向显示，最大宽度为1060PX，#primary 占在其父容器宽度的67%，#senondary 占30%，再加上3%的左外边距。 第二个，适合竖向平板电脑和更小的屏幕尺寸。
编码完成后，可以测试下布局是怎么响应的。
2.媒体
响应式布局是响应式网站的“骨架”，媒体元素（视频、图像）是响应式网站的“皮肉”。
下面这段CSS代码能让你的网站图像不超过显示终端尺寸。
用CSS3 来为匹配 min-device-width 条件的媒体指定替换图像：
图像能这样设置，怎样实现响应式的视频呢？
HTML：
CSS：
3.字体
CSS3 规范引入了一个新的单位叫 rem，和 em 类相似，但相对于 HTML 元素来说， rem 更易于使用。
rem 是相对于 HTML 元素的，不要忘了重置 HTML 的字体大小：
完成后，您可以定义响应式的字体大小，如下所示：
完成这三步后，你就能拥有一个响应式的网站了。不过这个教程对大部分用户来说，还是有点复杂了。如果不会程序，是不是就不能做响应式网站了呢？并不是。目前一些自助建站工具已经非常强大，以建站宝盒为代表的H5模板建站，非常适合不懂编程的小白。拖拽操作，能打字就能建站，网站做出来高端大气，尤其适合要做营销型响应式网站的企业。
零基础建响应式网站：http://www.iisp.com/design/?s=yuqiuping
上一篇：简单设计自适应网页 下一篇：怎么将一个网站修改成html5 标准的网站？
举报不良网站
高新企业证书编号：GR201644000568