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. 在SSH项目中Struts2、Spring、Hibernate分别起到什么作用？

    (1)Struts主要起控制作用,Spring主要起解耦作用,Hibernate主要起操作数据作用. (2)Struts2是一个基于MVC设计模式的Web应用框架,在MVC设计模式中Struts2作为 ...

  2. 自定义实现Java动态代理

    转自:https://www.cnblogs.com/rjzheng/p/8750265.html 一 借助JDK的API实现: 1.先创建一个接口,并实现它 public interface Per ...

  3. 第四周课程总结&实验报告

    实验报告 1.写一个名为Rectangle的类表示矩形. 其属性包括宽width.高height和颜色color,width和height都是double型的,而color则是String类型的.要求 ...

  4. 191024DjangoORM之单表操作

    一.ORM基础 ORM:object relation mapping 对象关系映射表 1.配置连接MySQL settings.py:将默认配置删除,加入以下配置 DATABASES = { 'de ...

  5. sudo密码一直出错

    Linux默认是没有将用户添加到sudoers列表中的,需要root手动将账户添加到sudoers列表中,才能让普通账户执行sudo命令. 所以要将用户添加到sudoers组中,才能执行sudo命令, ...

  6. 一、linux下nginx1.7.8+php5.6.3的环境配置

    部分参考:http://www.cnblogs.com/simpman/p/4151662.html http://blog.zyan.cc/nginx_php_v6 1.利用linux系统自带的yu ...

  7. Why are dashes preferred for CSS selectors / HTML attributes?

    Why are dashes preferred for CSS selectors / HTML attributes? I use dashes because I don't have to h ...

  8. 问题：解决上传文件IE浏览器弹出下载框bug？

    控制器方法的返回值必须以String返回,再由js处理转换成json对象   $.ajaxFileUpload({ url: "/project/proj_conver_upload&quo ...

  9. java操作poi生成excel.xlsx（设置下拉框）下载本地和前端下载

    需求:导入excel表格,如果excel有错误,将错误的地方标红,在把数据以excel的形式写出,供用户下载解决方案:1.以实体类的方式接收excel并解析(创建两个集合一个接收正常的数据一个接收错误 ...

  10. 使用ViewPager实现广告自动轮播的效果

    package com.loaderman.viewpgerlunbodemo; import android.os.Bundle; import android.os.Handler; import ...