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"/> 结果: 在横屏下显示这样式
- 干货:Java正确获取客户端真实IP方法整理
- sublime学习笔记
- Java程序员必须掌握的常用Linux命令。
- SAMP论文学习
- IEEE Trans 2009 Stagewise Weak Gradient Pursuits论文学习
- async和enterproxy控制并发数量
- 从零开始写项目终极【维护网站、修复Bug】
- Redis 数据结构与内存管理策略(下)
- Redis 数据结构与内存管理策略(上)
- Servlet第三篇【request和response简介、response的常见应用】
- Java 10的10个新特性,将彻底改变你写代码的方式!
- JDK9新特性实战:简化流关闭新姿势。
- Druid数据库连接池就是这么简单
- 使用 github 做代码管理,知道这些就够了
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- 实验4.1 编码裁剪算法(鼠标交互版)
- python实现对变位词的判断方法
- python实现一个猜拳游戏
- 实验5 OpenGL二维几何变换
- Python关键字及可变参数*args,**kw原理解析
- 实验6 OpenGL模型视图变换
- python学生管理系统的实现
- 详解Android使用Handler造成内存泄露的分析及解决方法
- android使用flutter的ListView实现滚动列表的示例代码
- 实验7 3D机器人
- EasyValidate优雅地校验提交数据完整性
- 实验8 OpenGL太阳系动画
- Django实现列表页商品数据返回教程
- 实验9 OpenGL光照
- Python实现多线程下载脚本的示例代码