网页设计之响应式设计博客分类： 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,网页内容的相对宽度、高度而不是绝对宽度高度，字体的相对大小，图片的自适应。

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

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