欢迎访问码农素材网

QQ交流群:569605755

首页 > 网站教程 > 图文教程图文教程

什么是响应式网站,响应式网站怎么写?

作者:码农站长  来源:  浏览:  发布时间:2017-06-30

响应式Web设计(Responsive Web design)的理念是:


页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成,包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad,我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等,以适应不同设备;换句话说,页面应该有能力去自动响应用户的设备环境。响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。

 data:image/jpeg;base64,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

Media Queries,其作用就是允许添加表达式用以确定媒体的环境情况,以此来应用不同的样式表。换句话说,其允许我们在不改变内容的情况下,改变页面的布局以精确适应不同的设备。

那么,Media Queries是如何工作的?

两种方式,一种是直接在link中判断设备的尺寸,然后引用不同的css文件:

<link rel="stylesheet" type="text/css" href="styleB.css"  media="screen and (min-width: 600px) and (max-width: 800px)">

意思是当屏幕的宽度大于600小于800时,应用styleB.css

另一种方式,即是直接写在样式表或<style>标签里:

@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时,应用下面的CSS样式*/

  .class {

    background: #ccc;

  }

}

写法是前面加@media,其它跟link里的media属性相同

其实基本上就是样式覆盖~,判断设备,然后引用不同的样式文件覆盖。

media就是响应式的固定标签,意思就是查询设备,screen的意思就是代表所查询的设备类型,指的是显示器、笔记本移动端等设备,除了screen以外还有其他属性:

media_type

设备类型说明

all

所有设备

aural

听觉设备

braille

点字触觉设备

handled

便携设备,如手机、平板电脑

print

打印预览图等

projection

投影设备

screen

显示器、笔记本、移动端等设备

tty

如打字机或终端等设备

tv

电视机等设备类型

embossed

盲文打印机

 

接下来举个小例子让大家更明白些:

一个三栏布局的,在不同的尺寸下,变为两栏,再变为一栏~

 

<!DOCTYPE HTML><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1" /><title>css3-media-queries-demo</title><style>

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {

    padding: 0;

    margin: 0;}

.content{

    zoom:1;}

.content:after{

    content: ".";

    display: block;

    height: 0;

    clear: both;

    visibility: hidden; }

.leftBox, .rightBox{

    float: left;

    width: 20%;

    height: 500px;

    margin: 5px;

    background: #ffccf7;

    display: inline;

    -webkit-transition: width 1s ease;

    -moz-transition: width 1s ease;

    -o-transition: width 1s ease;

    -ms-transition: width 2s ease;

    transition: width 1s ease;}

.middleBox{

    float: left;

    width: 50%;

    height: 800px;

    margin: 5px;

    background: #b1fffc;

    display: inline;

    -webkit-transition: width 1s ease;

    -moz-transition: width 1s ease;

    -o-transition: width 1s ease;

    -ms-transition: width 1s ease;

    transition: width 1s ease;}

.rightBox{

    background: #fffab1;}

@media only screen and (min-width: 1024px){

    .content{

            width: 1000px;

            margin: auto

        }

}

@media only screen and (min-width: 400px) and (max-width: 1024px){

    .rightBox{

        width: 0;

    }

    .leftBox{ width: 30%}

    .middleBox{ width: 65%}

}

@media only screen and (max-width: 400px){

    .leftBox, .rightBox, .middleBox{

        width: 98%;

        height: 200px;

    }

}</style></head>

<body><div class="content">

  <div class="leftBox"></div>

  <div class="middleBox"></div>

  <div class="rightBox"></div></div></body></html>

 

 

响应式 布局设计

上一篇:返回列表下一篇:HTML中head标签中有哪些标签元素

评论:

  • 匿名2017-09-07

    是不是自己评论的

  • 匿名2017-07-27

    纽币了我滴哥

  • 匿名2017-06-30

    终于明白什么是响应式

  • 匿名2017-06-30

    此篇精华

评论这篇文章:
验证码: