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. 自动化部署脚本--linux执行sh脚本

    自动化部署脚本文件目录: 运行主程序:./install.sh #!/bin/bash SCRIPTPATH=$(cd "$(dirname "$0")"; p ...

  2. Qt编写大数据大屏UI电子看板系统

    前言 目前大屏大数据可视化UI这块非常火,趁热也用Qt来实现一个,Qt这个一站式超大型GUI超市,没有什么他做不了的,大屏电子看板当然也不在话下,有了QSS和QPainter这两个无敌的工具组合,借用 ...

  3. 【MAC】安装chrome浏览器

    step1:下载dmg安装包 chrome下载地址 点击[下载Chrome] step2:安装chrome 下载好googlechrome.dmg文件后,像其它程序一样安装就可以了 打开访达--> ...

  4. Windows下搭建Docker与Kubernetes(DevOps一)

    Docker与Kubernetes (二)搭建 开通  Hyper-V 安装Docker for Windows 开通Kubernetes 3.关键概念 PodKubernetes 中的最小单元,一个 ...

  5. React 事件对象、键盘事件、表单事件、ref获取dom节点、react实现类似Vue双向数据绑定

    1.案例实现代码 import React, { Component } from 'react'; /** * 事件对象.键盘事件.表单事件.ref获取dom节点.react实现类似Vue双向数据绑 ...

  6. flutter stack嵌套,appbar透明,Container设置背景图片并且图片在appbar之下

    stack嵌套 一般情况下 stack是无法嵌套,出现stack嵌套,布局就会出乱 解决方式:就是第二个stack需要确定宽高 appbar透明 AppBar( backgroundColor: Co ...

  7. STM32Cube填坑,ST link 下载一次以后无法下载

    ST link 下载一次以后无法下载, 原因是工程设置忘记设置Debug模式

  8. git 新建项目提交本地项目代码

    git init git remote add origin ssh://git@42.123.127.93:10022/tyshawn/sdap1.git git add . git commit ...

  9. Day06:抽象类、接口和内部类(上)

    JVAV中的常量 什么是常量? 常量就是不会变化的数值 为什么需要常量? 方便使用(调用)不会变化的数值 特性 不能修改 所有对象共享 常量一定是成员 定义 public static final 类 ...

  10. 【HANA系列】SAP HANA的ini文件存储路径

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP HANA的ini文件存储 ...