1. 概念: 写一套css样式可以同时适配多个终端，是为解决移动互联网诞生的。

2. 作用: 面对不同的分辨率设备灵活性强，能够快捷解决多设备显示适应问题

3. 原理

媒体查询

① 外联式媒体查询语法

当屏幕窗口大于等于960px时，引入 red.css 文件

当屏幕窗口小于960px时，引入 blue.css 文件

② 内嵌式媒体查询

语法:

当屏幕窗口大于640px并且小于960px时，body背景色为红色

 推荐前端博客：http://www.sharedblog.cn/?sort=5&page=5

Css布局 响应式布局介绍的更多相关文章

  1. CSS实现响应式布局

    用CSS实现响应式布局 响应式布局感觉很高大上,很难,但实际上只用CSS也能实现响应式布局要用的就是CSS中的没接查询,下面就介绍一下怎么运用: 使用@media 的三种方法 1.直接在CSS文件中使 ...

  2. Responsive Web CSS – 在线响应式布局创建器

    如果您已经使用了 CSS 或前端框架,创建响应式布局应该不难. 然而,如果你刚涉足这类布局,Responsive Web CSS 可以帮助你快速上手. 这是一个基于 Web 的工具,使任何人都可以通过 ...

  3. flex布局 响应式布局

    移动端页面开发流程   移动端页面布局 一.移动端app分类 1.Native App原生app手机应用程序 使用原生的语言开发的手机应用,Android系统用的是java,ios系统用的是objec ...

  4. 用CSS实现响应式布局

    响应式网页看起来高大上,但实际上,不用JS只用CSS也能实现响应式网站的布局 要用到的就是CSS中的媒体查询下面来简单介绍一下怎么运用 使用@media 的三种方式 第一: 直接在CSS文件中使用 @ ...

  5. 【css】响应式布局入门【转】

    最近研究响应式设计框架的时候,发现网上很多相关的属性介绍,却很少有系统的入门级使用的文章,我自己整理了一篇入门知识,并没有什么高深的理论,也不牵扯到框架. 目前已经越来越多的站点以及wap站点使用响应 ...

  6. css实现响应式布局的相关内容

    所以我就在做自适应的时候查了一些资料 首先我发现一个问题:有响应式布局和自适应布局两种布局效果 简单来说,响应式布局就是不同的设备无论大小 布局都自动调整大小 页面布局都一样 可以保证无论什么设备 用 ...

  7. CSS的响应式布局

    响应式布局是什么 它是相对于固定像素大小的网页而言的,顾名思义,响应式布局就是网页能够响应各种各样不同分辨率大小的设备,能够将网页很好的呈献给用户. 如何实现响应式布局? 1.CSS3@media查询 ...

  8. css的响应式布局和动画

    把响应式布局和动画放在一起写是因为他们有个共同点@符号 先讲讲响应式布局@media 响应式布局==曾经==非常的流行,这种布局方式可以做出一也兼容一切设备的页面,但是当页面的功能越来越多,css文件 ...

  9. CSS实现响应式布局(自动拆分几列)

    1.css代码 <style type="text/css"> .container{ margin-top: 10px; } .outerDiv{ float:lef ...

随机推荐

  1. windows上批量杀指定进程

    Taskkill 结束一个或多个任务或进程.可以根据进程 ID 或图像名来结束进程. 语法 taskkill [/s Computer] [/u Domain\User [/p Password]]] ...

  2. html 绘图

    <html> <head> <title>canvas绘制图形</title> <style> body{ margin: 0px; pad ...

  3. Kotlin之环境的配置和搭建

    第一步 . 安装和配置JDK http://www.cnblogs.com/loaderman/p/6402948.html 第二步 安装和下载Kotlin 进入Kotlin官网 :https :// ...

  4. 阶段3 2.Spring_05.基于XML的IOC的案例1_3 测试基于XML的IOC案例

    编写测试方法. TestMehtod 生成测试方法 只需要改个名字叫做testFindAll 然后就复制这个方法,多复制几次改改名字 findAll方法 编写查询所有的代码 选中和这个方法,run 根 ...

  5. navicat 系列软件一点击菜单栏就闪退

    现象:安装多个版本都出现了闪退的现象 解决方案:后来发现,原来是启动了有道词典屏幕取词才会出现这种现象,关了有道就没事.

  6. P4995 跳跳！

    喵喵喵好久没做过贪心的题目了,刷一下免得忘了嘤嘤嘤 题面 虽然是黄题,但是我承认并不是很难,so看代码吧还是.. #include<set> #include<map> #in ...

  7. Java内存溢出

    中间件应用Java内存溢出常见的三种情况: 1.OutOfMemoryError: Java heap space 2.OutOfMemoryError: PermGen space 3.OutOfM ...

  8. 【Qt开发】Qt在QLabel（QWidget）鼠标绘制直线和矩形框

    原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://devbean.blog.51cto.com/448512/243546 说实话, ...

  9. Angular5 *ngIf 和 hidden 的区别

    问题 项目中遇到一个问题,有一个过滤查询的面板,需要通过一个展开折叠的button,来控制它的show 和 hide.这个面板中,有一个Select 组件,一个 input 查询输入框. 原来代码是: ...

  10. Centos7搭建Open-ldap

    OpenLDAP是轻型目录访问协议(Lightweight Directory Access Protocol,LDAP)的自由和开源的实现,可用于实现统一认证 一.安装环境 安装方式:yum 系统: ...