东莞网站建设公司|东莞做网站公司|东莞企业网站建设|东莞网络公司-东莞市新势力网络科技有限公司

服务热线:0769-22800432 专线:13480055593(罗生) / 15102077200(黄生)

如何制作一个响应式的网站建设

来源:东莞网站建设-新势力网络   发布时间:2017-12-25 09:26 点击:

如何制作一个响应式的网站建设

总体来说,响应式网页设计是一种新的网页设计思路,我们需要满足不同设备下的浏览模式,达到俱佳的体验效果。所以要想做好一个响应式网页,首先必须要满足桌面各个浏览器版本下正常显示页面。其次才考虑以webkit为内核的手机终端浏览器效果。由于IOS和Android浏览器都是webkit内核的,这里的响应我们暂时就不考虑ie9以下版本的浏览器了。

我们先以相对比较简单的新势力cms网站(比如:www.xslcms.com)类型为例,它默认一个固定宽度为980px的网页,当浏览器窗口比980px小的时候,这个布局就变为100%比宽度的液态布局,而不是固定宽度。当浏览器窗口再缩小于700px的时候,我们就隐藏侧边栏。当窗口小于480px的时候,横向导航条隐藏,换成点击下拉效果的导航条。

 

如上图,从左至右依次为移动版本—>平板电脑—>桌面浏览器的效果。

1、响应式网页结构

首先,我们先来看下上面案例展示的html结构,如下图所示:

可以说这是一个很典型的博客模版结构。一个wrapper容器包含了头部、内容、侧栏、底部。

2、Meta标签

其次就需要我们针对移动设备加入这个meta标签。告诉webkit内核浏览器初始缩放比例为1。(很多iOS和Android的浏览器都是基于webkit内核的)

<meta name="viewport" content="width=device-width; initial-scale=1.0">

IE8或者更早的浏览器并不支持Media Query。你可以使用media-queries.js或者respond.js来为IE添加Media Query支持。

<!--[if lt IE 8]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

如果你的网站页面中用了html5文档声明,用到了很多html5标签,但是这些标签在ie9以下版本是不支持的,所以我们必须引用一个html5.js文件使得这些标签被其它低版本浏览器确认。

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

3、媒介查询-Media Queries

在这里马海祥就不再详细的讲正常页面下的布局如何写了。在此主要讲解下媒体查询media queries这个css的设计思路。这个是css3的属性,也是我们这个响应式网页设计的最重要的部分。可以说是响应式设计的核心。它根据条件告诉浏览器如何为指定视图宽度渲染页面。

<link href="media_queries.css" rel="stylesheet" type="text/css">

下面我们用CSS3的媒介查询(Media Query)特性使得网页适应不同设备,即根据设备的分辨率和缩放自动重新布局。

@media screen and (max-width: 480px) {
这里就是重新设定一些css的属性
}

(1)、当浏览器视图宽度为小于等于980像素时,如下规则将会生效。基本上,我会将所有的容器宽度从像素值设置为百分比以使得容器大小自适应。

#pagwraper { width: 94%;}重新设定容器宽度为94%;
#content { width: 65%; padding: 3% 4%;}重新设定内容宽度为65%;
#sidebar { width: 30%;}重新设定侧边栏宽度为30%

 

注意这里我们用到了%,使得页面是一个流体布局。

(2)、当浏览器视图宽度为小于等于700像素时,视图指定#content和#sidebar的宽度为自适应并且清除浮动,使得这些容器按全宽度显示。

#content { width: auto;float: none;margin: 20px 0;}
#sidebar { display:none; width: 100%; margin: 0; float: none; }

 

容器宽度继承了上面94%的宽度,这个时候我们设定内容宽度为自动,使其填满外部的wraper容器。并清除其浮动样式。这个时候的浏览的页面,可以权衡下右边侧栏的重要程度,如果觉得有必要继续在页面中显示,我们可以清除其浮动,并把宽度也设为100%,这样就在content这个容器下显示。但马海祥觉的一般情况下,在这么小的浏览窗口中,用户只想看到最主要的内容,右边侧栏成为了一个补助模块,那么可以直接把它隐藏掉。这样可以减少页面的高度。

(3)、当浏览器窗口小于等于480px的时候,一般这个就是iPhone的横向宽度。就要将#header元素的高度设置为自适应,将h1的字体大小修改为24像素并隐藏侧边栏。

首先我们设计webkit内核浏览器下禁用文字大小调整,代码如下:

html { -webkit-text-size-adjust: none; }

其次就是代码的转换了,如下图所示:

 

其实在480px宽度下的时候,整体框架布局已经不用设置,马海祥认为我们应该考虑得更多的是怎么把一个良好的页面布局展示给用户。而在这个模式下,如果导航条有很多选项的时候,就会相互堆叠换行,那么这里我们设计成点击出下拉菜单形式,如下图所示:

 

这里我们首先考虑在小设备窗口下header太高已经占据了大半的屏幕显示,所以这里我们重新设定下header的高度,能完整呈现出这个站点logo就可以了。在480px小设备窗口下浏览,页面内容会很长,这个时候我们要在底部加个返回页面顶部的按钮。

最后我想再说的一点是关于弹性图片,我们这里用到的是img { max-width: 100%; }。

做网站就是做服务
网站建设是长期服务的一个过程,新势力提供稳定的售后服务,为客户提供VIP一对一专属服务。
售后服务包括网站稳定的运营保障,网站优化指导,网站问题解答,技术顾问

 

全天候网站售后
即时在线沟通
网站安全防护
确保网站数据安全

24小时在线客服
  • 建站咨询
  • 技术服务
  • 关注新势力
联系方式 / Contact Us
手机:13480055593/15102077200
电话:0769-22800432
传真:0769-22800432
网址:www.xsl9.com
邮箱:admin@xsl9.com
地址:广东省东莞市南城区雅园村村前路6号二层