css3响应式布局设计——回顾

响应式设计是在不同设备下分辨率不同显示的样式就不同。 media 属性用于为不同的媒体类型规定不同的样式。根绝浏览器的宽度和高度重新渲染页面。     语法: @media mediatype and | not | only (media feature) {}     示例:       <link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css"/>     结果: 分辨率在大到600的时候 显示这个样式表里面的样式。

媒体类型:

      all 用于所有设备

 print 用于打印机和打印设备      

      screen 用于电脑屏幕,平板电脑,智能手机。

          speech 用于阅读器等发声设备

关键字:

       and 运算符用于符号两边规则均满足条件则匹配。

      @media screen and (max-width : 600px) {           /*匹配宽度小于600px的电脑屏幕*/       }

    not关键字是用来排除某种制度的媒体类型。       @media not print {         /*匹配除了打印机以外的所有设备*/       }     only 用来定某种特定的媒体类型。       @media only screen and (min-width:300) and (max-width:500){         /*这段是只(only)针对彩色屏幕设备*/     }

媒体特性: (常用的)

 max-width(max-height): 最大宽度和最大高度

      @media (max-width: 600px) {         匹配界面宽度小于600px的设备       }     min-width(min-height) : 最小宽度和高度       @media (min-width : 400px) {         匹配界面宽度大于400px的设备       }     max-device-width(max-device-height) 设备的最大宽度和高度       @media (max-device-width: 800px) {         匹配设备(不是界面)宽度小于800px的设备       }     min-device-width(min-device-height):  设备的最大宽度和高度       @media (min-device-width: 600px) {         匹配设备(不是界面)宽度大于600px的设备       }     orientation: portrait 竖屏       <link rel="stylesheet" media="all and         (orientation:portrait)"       href="indexa.css"/>      结果: 在竖屏下显示这样式     orientation:landscape 横屏       <link rel="stylesheet" media="all and         (orientation:landscape)"           href="indexa.css"/>      结果: 在横屏下显示这样式

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏菜鸟计划

vue表单详解——小白速会

一、基本用法 你可以用 v-model 指令在表单 <input> 及 <textarea> 元素上创建双向数据绑定。 但 v-model 本质上不过是语法糖。...

47650
来自专栏移动开发面面观

React Native的动画(一)

13950
来自专栏编程微刊

2018年各大互联网前端面试题三(阿里)

38730
来自专栏HTML5学堂

HTML5-类库系列 事件与获取完成版样式

HTML5学堂:最近讲师团队在学习JS类库的知识,因此就跟大家一起共享一下类库的搭建吧。今天要讲解的功能是:获取渲染后样式以及事件兼容处理。渲染后样式修正了通过...

36170
来自专栏Python攻城狮

Markdown-认识与使用1.简介2.使用一级标题3.设置Markdown编辑

Markdown 是一种轻量级的「标记语言」,它的优点很多,目前也被越来越多的写作爱好者,撰稿者广泛使用。看到这里请不要被「标记」、「语言」所迷惑,Markdo...

8010
来自专栏IMWeb前端团队

:before,:after伪元素妙用

本文作者:IMWeb 黎清龙 原文出处:IMWeb社区 未经同意,禁止转载 这两个伪元素分别表示元素内容的【前】【后】,利用这两个伪元素可以在元素内容...

313100
来自专栏HT

基于 HTML5 Canvas 的 3D 碰撞检测

这是公司大神写的一个放官网上给用户学习的例子,我一开始真的不知道这是在干嘛,就只是将三个形状图元组合在一起,然后可以同时旋转、放大缩小这个三个图形,点击“Ani...

23650
来自专栏程序员的诗和远方

让文字沿着路径动起来 (SVG)

由于我对 SVG 也不是太熟悉,有些地方可能有所疏漏,有什么疑问欢迎留言,有什么写错的地方,欢迎指出哈。

38970
来自专栏王鹤的专栏

Vue.js 2.0源码解析之前端渲染篇

Vue.js框架是目前比较火的MVVM框架之一,简单易上手的学习曲线,友好的官方文档,配套的构建工具,让Vue.js在2016大放异彩,大有赶超React之势。...

5.9K00
来自专栏老马寒门IT

02-Vue入门之数据绑定

2.1. 什么是双向绑定? Vue框架很核心的功能就是双向的数据绑定。 双向是指:HTML标签数据 绑定到 Vue对象,另外反方向数据也是绑定的。通俗点说就是,...

27660

扫码关注云+社区

领取腾讯云代金券