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"/>
结果: 在横屏下显示这样式
转载于:https://www.cnblogs.com/nmxs/p/6369837.html
css3响应式布局设计——回顾相关推荐
- html5/css3响应式布局介绍及设计流程
html5/css3响应式布局介绍 html5/css3响应式布局介绍及设计流程,利用css3的media query媒体查询功能.移动终端一般都是对css3支持比较好的高级浏览器不需要考虑响应式布局 ...
- html5/css3响应式布局介绍
转载链接:http://www.51xuediannao.com/html+css/htmlcssjq/694.html html5/css3响应式布局介绍 html5/css3响应式布局介绍及设计流 ...
- html响应式弹性布局,CSS3响应式布局之弹性盒子
CSS3弹性盒模型可以轻松的创建自适应浏览器流动窗口的布局或自适应字体大小的布局.同时该盒子决定了一个盒子在其他盒子的分布方式,及如何处理可用的空间. 自己写了一个弹性盒子的demo: 主要HTML代 ...
- java 自适应屏幕_自适应屏幕的CSS响应式布局设计技巧总结
摘要:这篇CSS教程栏目下的"自适应屏幕的CSS响应式布局设计技巧总结",介绍的技术点是"css响应式.响应式布局.响应式.自适应.CSS.设计",希望对大家开 ...
- 浅谈CSS3 响应式布局--Media Queries
CSS3 Media Queries , CSS3媒体查询.使用 @media 查询,你可以针对不同的媒体类型定义不同的样式:也可以针对不同的屏幕尺寸设置不同的样式:当重置浏览器大小的过程中,页面也会 ...
- Web响应式布局设计简介
随着移动互联的到来,市面上的移动终端设备越来越多屏幕尺寸也大小不一.就拿苹果的iPhone来说就有多个不同尺寸的版本,还有iPad也是随着技术的进步屏幕大小.分辨率也在变化.更不用说基于开源Andro ...
- CSS3 响应式布局实例
掌握了响应式设计的核心技术之后,你可以迫不及待想要使用它来构建响应式网站了.也许你会认为响应式设计有点复杂,但事实上,它比你想象的要简单. 下面通过构建一个响应式的页面基本布局,让你快速了解如何使用响 ...
- Responsive响应式布局设计
响应式布局介绍: 什么是响应式布局 1.服务器根据不同的浏览器用户端,为用户呈现不同的页面效果. 2.可以让一个网站兼容不同分辨率的设备,给用户更好的视觉使用体验. 3.移动互联网催生了响应式布局的诞 ...
- HTML5和CSS3响应式WEB设计指南译者序
"不是我不明白,这世界变化快."崔健的这首歌使用在互联网领域最合适不过.只短短数年的功夫,互联网的浪潮还没过去,移动互联网的时代已经来临.人们已经习惯将越来越多的时间花在各种移动设 ...
最新文章
- 华为服务器引入清空外部配置文件,云服务器还原配置文件
- Java网络编程从入门到精通(21):HTTP消息的格式
- mysql cmd 实时监控_MySQL实时监控工具orztop的使用介绍
- OpenCV3学习(7.4)——图像分割之四(Meanshift算法,PyrMeanShiftFiltering函数)
- c 语言比较三个字符串,C语言字符篇(三)字符串比较函数
- 1054: 猴子吃桃
- linux命令ls -l的默认排序方式
- 聊一聊字节跳动的面试
- 在 可编辑的 Div 的 光标位置 插入 文字 或 HTML
- [Project Euler] Problem 48
- 【图像加密】基于matlab GUI+Logistic+Tent+Kent+Henon图像加密与解密【含Matlab源码 1745期】
- SRP记录_20190418
- 两种方法教你将PDF转换CAD搞定!
- 专精特新是什么,为什么要申报“专精特新”中小企业
- 设计模式(一)——统一建模语言基础知识
- linux shell题库,shell习题-30
- 关于ST的一些库的说明(附标准库下载地址)
- 合肥工业大学机器人技术五十六题
- BGP 十一条选路原则与BGP路由传递的注意事项介绍
- 16、数据分析--朴素贝叶斯
热门文章
- Qt C/C++统计运行时间
- .Net中的事件处理模型
- 【Scala】Scala中特殊函数的使用(代码)
- Spring MVC数据绑定和表单标签的应用(附带实例)
- 魔方机器人需要特制魔方吗_火影忍者手游:如果新春水门金币团购,你会夸魔方良心吗?...
- Web前端现在薪资多少?企业喜欢什么样的Web前端工程师?
- 经验分享:Web前端入门要怎么开始学?
- mysql导出数据dump_MYSQL使用mysqldump导出表的部分数据
- power bi 日期计算_2020国内外常用的BI商业智能软件
- java中使用httpget_如何在Java中进行HTTP GET?