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. Scrum立会报告+燃尽图 02

    本次作业要求参见:https://edu.cnblogs.com/campus/nenu/2019fall/homework/9912 一.小组情况组长:贺敬文组员:彭思雨 王志文 位军营 徐丽君队名 ...

  2. sql server中 设置与查看锁的超时时间(ZT) @@LOCK_TIMEOUT

      在数据库的应用系统中,死锁是不可避免的.通过设置死锁的处理优先级方法,可以在数据库引擎中自动检测到死锁,对发生的死锁会话进行干预,从而达到解除死锁的目点,但在这种情况下,会话只能被动的等待数据库引 ...

  3. jenkins部署java项目

    #########################################jenkins部署#################################3 一.jenkins是什么? J ...

  4. 搭建前端性能showslow平台

    ShowSlow是一个可以帮助监测各种网站性能指标趋势变化的开源工具.通过收集YSlow,Page Speed,WebPageTest和dynaTrace AJAX排名的数据形成图表以帮助了解网站的变 ...

  5. 一、基础篇--1.1Java基础-HTTP请求的GET与POST方式的区别【转】

    http://www.cnblogs.com/logsharing/p/8448446.html 转载的这篇文章,很有意思,说的也很全面,学习下,防丢失,备份记录下 GET和POST是HTTP请求的两 ...

  6. HOG + SVM(行人检测, opencv实现)

    HOG+SVM流程 1.提取HOG特征 灰度化 + Gamma变换(进行根号求解) 计算梯度map(计算梯度) 图像划分成小的cell,统计每个cell梯度直方图 多个cell组成一个block, 特 ...

  7. python - yeild

    带有yield的函数不仅仅只用于for循环中,而且可用于某个函数的参数,只要这个函数的参数允许迭代参数.比如array.extend函数,它的原型是array.extend(iterable). 带有 ...

  8. kotlin之字符串

    在kotlin 中 使用String 表示字符串类型,如下二类字符串 一 普通字符串 var s1 = "hello world" 二 保留原始格式的字符串 var s2 = &q ...

  9. 阶段3 2.Spring_07.银行转账案例_6 测试转账并分析案例中的问题

    转账回滚这里把异常打印出来.AccountServiceTest.java 把数据库的金额现在都改成1000块 运行测试方法 这里已经报错了. 刷新数据库内的数据.这样我们事物就控制成功了. 事物控制 ...

  10. python一些包

    jieba结巴 github上已经够详细了https://github.com/vinta/awesome-python