欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

网页设计之响应式设计 博客分类: html 响应式 css js 响应式设计 html

程序员文章站 2024-03-21 11:04:40
...

在平时的网页设计中,我们需要考虑网页在各种设备上的适应情况,面对这种适应情况而作出的设计,就是响应式设计。响应式设计的目的是为了让网页在各种设备上都能很好的体现。那么如何才能做到呢?

第一:

我们需要用到css中的一个语法:

@media
@media的语法结构如下:
@media screen and (max-width:600px){
body{
    background-color:black
}};//意思是当屏幕的宽度小于600像素的时候,把背景改成为黑色;width指的是当前设备的宽度。

 对于这个语句中的and ,也可以根据情况而使用,not 和only;max-width同时也可以min-width;

@media screen and (max-width:600px) and (min-width:300px){
body{
    background-color:black;
}}//同时支持链式结构,上述语句表示当网页的宽度在300-600像素之间的时候,把背景改成黑色。

 了解了css的这一语法之后,我们可以适应很多屏幕来做开发。但是需要注意的是,在写css的时候,要注意选择器的优先级。

第二:

响应式设计中我们难免要做到页面的div块随着页面的大小而变化。如何解决这一问题呢?

1:我们需要在页面中写一个基准div块,比如:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name=”viewport” content=”width=device-width, initial-scale=1,maximum-scale=1″ />
    <style type='text/css'>
        #base{
            position:relative;
            max-width:1355px;
            margin:0 auto;/*居中*/
            padding:0;
        }
    </style>
</head>
<body>
<div id='base'>

</div>
</body>
</html>

当我们把基准的这个#base确定之后,我们接下来写的页面的div块元素要换成百分比的形式,这样就能保证在屏幕变化时,网页不失真。 同时要把字体设置成以em为单位的。

第三:

在手机等屏幕上面显示良好的网页,需要

<meta name=”viewport” content=”width=device-width, initial-scale=1″ />

 在网页的meta标签中写上这一句话.viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。

所有主流浏览器都支持这个设置,包括IE9。

 

<!–[if lt IE 9]><script src=”http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js”>
</script>
<![endif]–>//if和endif是判断是不是ie浏览器的语句,如果想要知道更多,你可以搜索<!–[if lt IE 9]>

第四:图片

img { max-width: 100%;}
img { width: 100%; }//老版浏览器
img { -ms-interpolation-mode: bicubic; }//windows平台ie浏览器的特定命令;

 其实也就是需要把图片设置成为相对的大小。

 

 

 上述语句是对于老式的浏览器而言的。在适配老师的浏览器的时候需要用到css3-mediaqueries.js。

那么综上所述,响应式网页的设计主要用到:@media,网页内容的相对宽度、高度而不是绝对宽度高度,字体的相对大小,图片的自适应。

最后,其实一个响应式的网页有很多多余的代码(对于手机,平板等而言),对于大型网页有可能会有加载缓慢的问题,所以并不是所有的网页都需要这么来进行设计。有的公司对于手机就有另外一个版本的手机网页。但是同一个网页过多的版本,维护起来就需要开发人员很大的精力。所以任何事情并不是总有完美的解决方案,只有最适应的才是最完美的。