响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的 普及，用"大势所趋"来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。随着技术的发展css3的特 性也被广泛应用开来,它的很多新标签也非常好用而且非常容易学习,就像css3的响应式布局也是非常6的,原本只能在pc端显示的网页现在可以通过 @media的加入就可以把一个网页变成响应式了,pc端也可以移动端也可以真是伸缩自如啊,例如呢

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <style>

/*    小于200px*/

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

            #p{

                background: red;

            }

        }

/*    大于300px*/

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

            #p{

                background: yellow;

            }

        }

    </style>

    <body>

        <p id="p">小于200px背景变红色大于300px背景为黄色</p>

    </body>

</html>

这段代码的效果

@media可以用于单条件也可以用于双条件例如：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <style>

/*    小于200px*/

        @media (min-width:200px ) and (max-width:500px ) {

            #p{

                background: red;

            }

        }

    </style>

    <body>

        <p id="p">200px以上并且500px以下背景变成红色</p>

    </body>

</html>

这段代码小于200px或者大于500px不显示效果

简单的一个@media就实现了响应式页面,是不是非常easy，

自己随便做的一个页面这是在450px以上的页面效果

这是450px以下的页面效果总体做法就是将每一块div响应式缩到450px以下的时候每个div的宽度为100%

高度为auto，我在写这个网页的时候遇到一个小小的问题,做到页面底部的时候底部导航飞了,它没有安安分分的落在底部而是在中间,我在这里分享一 下小小的知识点那就是我最后的解决方法,只需要给底部的div一个style样式  clear：both这样底部就会安安分分的固定到下面了,在media里还会有横屏和竖屏的响应式,竖屏为 @media（orientation:portrait）

竖屏为@media(orientation:landscape)这样就可以适配横屏和竖屏了，media的优势非常多例如我们在创建自己的简历 的时候可以利用响应式布局这样我们的机会岂不是大了很多,HR也有可能会在手机上看到你的简历这个时候机会可能就悄悄的来到你的身边呢

css3media响应式布局的更多相关文章

  1. CSS学习笔记——响应式布局

    响应式布局 响应式布局是现在很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果,设计师提出了响应式布局的设计方案.所谓的响应式布局,就是一个网站能够 ...

  2. 一步步开发自己的博客 .NET版 剧终篇（6、响应式布局 和 自定义样式）

    前言 这次开发的博客主要功能或特点:    第一:可以兼容各终端,特别是手机端.    第二:到时会用到大量html5,炫啊.    第三:导入博客园的精华文章,并做分类.(不要封我)    第四:做 ...

  3. web页面之响应式布局

    一.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网 ...

  4. 移动Web之响应式布局的探讨

    响应式布局的探讨 响应式布局的两种方式 基于百分比的布局 例:Bootstrap 基于rem的布局 例:淘宝触屏版 这两种布局都需要依赖于CSS3的media query来设置布局断点(或者通过js监 ...

  5. html5+css3+jquery完成响应式布局

    响应式布局,流体布局,自适应布局,静态布局等等,这是移动设备的飞速发展,前端人员不得不跟上潮流的一个方向.实际上各种设备尺寸,分辨率大都不同,真的适应各种设备依旧是不现实的,首先是浏览器差异化,让我们 ...

  6. css3媒体查询实现网站响应式布局

    最常见的办法就是基类(最常用的网站布局)+扩展类(几种不同的网站布局类)来实现不同的布局. <!–使用说明:网站基本布局,使用class="layout";使用ipad访问时 ...

  7. 关于bootstrap和响应式布局

    bootstrap导入 首先需要安装好插件 然后就是在代码器写导入代码 代码如下 <html lang="zh-CN"> <head> <meta c ...

  8. 【Win10开发】响应式布局——AdaptiveTrigger

    接触过Windows10的童鞋已经知道Universal app不仅可以运行在pc上,还可以运行在mobile或者其他平台上.那么这样势必会带来一个问题,如何针对不同屏幕来进行布局适配.所以微软提供了 ...

  9. CSS3与页面布局学习笔记（四）——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)

    一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...

随机推荐

  1. poj 1236 Network of Schools（连通图入度,出度为0）

    http://poj.org/problem?id=1236 Network of Schools Time Limit: 1000MS   Memory Limit: 10000K Total Su ...

  2. eclipse中如何设置tomcat启动时间

    现象:在eclipse中启动tomcat总是提示“Server Tomcat v5.5 Server @ localhost was unable to start within 45 seconds ...

  3. zookeeper的配置项

    1 tickTime:CS通信心跳数 Zookeeper 服务器之间或客户端与服务器之间维持心跳的时间间隔,也就是每个 tickTime 时间就会发送一个心跳.tickTime以毫秒为单位. tick ...

  4. 电脑蓝屏分析教程，附工具WinDbg(x86 x64)6.12.0002.633下载

    我们常常在使用电脑中,有时会碰到电脑蓝屏,我们经常束手无策,不知道为什么会蓝屏?有些蓝屏后自动重启能正常进入系统,那么我们就可以借助工具进行分析.而有些可能需要进入到安全模式或者pe系统才会正常,那么 ...

  5. st_Alarm_GenAlarmDealTime

    USE [ChiefmesNew]GO/****** Object: StoredProcedure [dbo].[st_Alarm_GenAlarmDealTime] Script Date: 04 ...

  6. update多表更新的2种方式

    update t1 set TermBeginQty =isnull((select top 1 JiaoPlusQty from WMS_RptMaterialPutDaily r where t1 ...

  7. Vue.js之初印象

    一.背景 MVVM模式,很多人在说在用,好吧,我落后了,我目前的项目木有用到MVVM模式的框架,vuejs,reactjs,angularjs,nonono,自己去捣鼓过ng,项目木有用到.实在不敢称 ...

  8. 【转】Java判断是否是整数，小数或实数的正则表达式

    经常会遇到这样的情况,需要判断一个字符串是否是一个合法的数,包括整数,小数或者实数. 网上查到很多文章大多是判断这个字符串是否全为数字,比如下面这段来自StringUtils的代码,可以看到,13.2 ...

  9. javascript常用方法整理--数组篇

    1. arrayObject.slice(start,end) 从已有的数组中返回选定的元素 参数 描述 start 必需.规定从何处开始选取.如果是负数,那么它规定从数组尾部开始算起的位置.也就是说 ...

  10. UNIX标准化及实现之POSIX标准可选头文件

    POSIX标准定义的可选头文件 头文件 说明 <aio.h> 异步I/O <mqueue.h> 消息队列 <pthread.h> 线程 <sched.h> ...