200

HTML5教程丨3个步骤让你的网站变成响应式网站

时间: 2016-12-05 14:25:30   点击数: 41314   来源: 耐思智慧

一个网站长得好看能吃吗?还真能!一个“秀色可餐”的网站不仅能增加人们的食欲,还能让你的营业额蹭蹭往上涨!但是,一个长得好看却只能活在电脑端的网站,真的不能吃!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 标准的网站?

旗下网站:耐思智慧 - 淘域网 - 我的400电话 - 中文域名:耐思尼克.cn 耐思尼克.top

耐思智慧 © 版权所有 Copyright © 2000-2024 IISP.COM,Inc. All rights reserved

备案号码: 粤ICP备09063828号  公安备案号: 公安备案 粤公网安备 44049002000123号  域名注册服务机构许可:粤D3.1-20240003 CN域名代理自深圳万维网

声明:本网站中所使用到的其他各种版权内容,包括但不限于文章、图片、视频、音频、字体等内容版权归原作者所有,如权利所有人发现,请及时告知,以便我们删除版权内容

本站程序界面、源代码受相关法律保护, 未经授权, 严禁使用; 耐思智慧 © 为我公司注册商标, 未经授权, 严禁使用

法律顾问:珠海知名律师 广东笃行律师事务所 夏天风 律师