CSS3在响应式网页设计中的应用.docVIP

CSS3在响应式网页设计中的应用 　　摘要：随着社会和网络技术的发展，移动设备正被人们越来越广泛的应用，并且成为访问互联网的最常见终端。而各种不同的设备，其显示屏幕是不同的。响应式网页正是为了在大小的不同屏幕上显示同样的网页而诞生的。文章对CSS3在制作响应式网页的代码实现等方面，进行了论述说明。 　　关键词：移动设备；CSS3；响应式网页 　　中图分类号：TP37 文献标识码：A 文章编号：1009-3044（2016）19-0030-02 　　随着互联网的发展及广泛应用，移动设备的应用也日益广泛，比如使用手机上网，使用IPAD访问网络等等，成为访问互联网最常见的方式。既然访问网络的终端设备不一样，导致了显示的屏幕大小不尽相同，那如何才能在不同大小的设备上呈现同样的网页呢？比如，手机的屏幕比较小，而电脑显示器的屏幕却比手机屏幕大很多倍。同样的内容，要在不同大小的屏幕上，都能正确显示和表达出来，那就需要借助于相应的方式和方法才能实现。 　　其实在很早以前，曾经就有人设想，设计者能不能对网页进行一次性设计之后，但是能对不同大小屏幕的设备，都能适用，这样，网页就能根据所用的屏幕宽度，进行自动调整，从而实现正确显示网页的功能。 　　之前，在没有CSS3的情况下，大多数都是把一个项目做很多个不同的版本，用JS或者其他设备进行判断，然后再跳转到指定的版本中去。但是现在随着CSS3技术的普及，在WEB设计中，可以使用CSS技术实现响应式设计，根据媒体设备的屏幕尺寸让网站的内容自动响应。 　　1 “响应式网页设计”的提出 　　早在2010年，Ethan Marcotte就提出了“自适应网页设计”这个名词，它的含义是指网页可以通过自动识别屏幕大小，来做出相应的调整，使网页能适应屏幕大小达到正常显示的新网页设计方式及技术。这就是响应式网页的来源。 　　2 “响应式网页设计”的实现 　　“响应式网页设计”是通过什么方式来实现的呢，主要是通过以下三个方面。 　　首先，通过标签的加入，可以用来实现响应式网页。的意思是指网页默认的宽度和高度。代码如下： 　　 　　这行代码的意思是，网页宽度与所用设备的屏幕宽度是相等的，网页的大小占所用设备屏幕大小的一倍。 　　其次，由于网页要根据屏幕大小来调整页面的布局，所以在书写CSS3代码的过程中，不能使用绝对宽度，其中也包括不能具有绝对宽度的元素。比如，CSS3代码不能写成这种代码：width：780 px；这样书写代码就相当于指定了所用元素的宽度，这样，在不同屏幕进行显示的时候就会出错。可以写成这种代码：width： 100%；或者width：auto；这样书写代码的含义是指定所用元素的宽度跟屏幕大小相同，或者随着屏幕大小自动调节。这样，在网页进行显示时才能跟所用设备的屏幕相匹配。另外，对于页面中的字体来说，在书写代码时，也不能定义字体的大小（px），而只能定义字体的相对大小（em）。比如，代码body {font： Arial 100% ；}，说明的含义是字体大小跟页面默认字体的大小是一样的。代码h1 {font-size： 1.5em；}的意思是h1字体的大小是默认字体的1.5倍。这两种定义字体大小的方式是正确的。假如写成body {font： Arial 16px ；}或者h1 {font-size： 30px；}，则是错误的。 　　第三，对于响应式网页来说，需要设置的布局是不能固定不变。也就是说，在网页中的每个区块，其位置都应该是浮动的，而不是固定不变的。比如，代码.right {float： left；width： 80%；}的含义是把.right区块设置为左浮动，宽度是页面的80%。使用浮动的优点是，如果屏幕的宽度不够，放不下水平方向的两个或多个元素，那第二个元素或其他元素会自动转到第二行或者第三行，而不会在水平方向进行排列，通过这种书写代码的方式，就不会在页面上出现水平滚动条了。 　　3 响应式网页设计的核心 　　对于响应式网页的实现来说，其核心就是通过CSS3引入Media Query模块。而使用Media Query模块的含义就是通过书写的CSS3代码来获取所用设备的屏幕大小，并根据屏幕大小来调用相应的CSS文件，以此来实现网页在该设备屏幕的正常显示。比如下面的代码： 　　link rel=stylesheet type=text/css 　　media=screen and （max-device-width： 200px） 　　href=Screen1.css / 　　它的代码含义是，如果屏幕宽度小于200像素，网页就会调用Screen1.css文件，使网页按照Screen1.css中定义的格式来显示网页内容。 　　假如代码的书写如下：