css3响应式布局教程—css3响应式
2024-09-19 20:36:20
响应式布局
一个网站能够兼容多个终端,并且在各个终端都可以很好展示体验。
媒体类型
在何种设备或者软件上将页面打开
1
2 3 4 5 6 7 8 9 |
all:所有媒体
braille:盲文触觉设备 embossed:盲文打印机 print:手持设备 projection:打印机预览 screen:彩屏设备 speech:'听觉'类似的媒体类型 tty:不适用像素的设备 tv:电视 |
1
2 3 4 5 6 7 8 9 10 11 12 13 |
#box{width:100px;height:100px;background-color:red;}
@media embossed{ /*盲文打印机是绿色*/ #box{background-color:green;} } @media tv{ /*在tv上是粉色*/ #box{background-color:pink;} } @media all{ /*在所有媒体上是红色*/ #box{background-color:red;} } |
关键字
and:连接媒体类型和媒体特性
1
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
@media all and (min-width:1201){ }
not:关键字是用来排除某种制定的媒体类型 @media not tv @media only tv max-width:当屏幕大小 小于等于 某个值的时候识别 orientation:横竖屏(portrait/landscape) @media (orientation:portrait) { //竖屏的时候 |
竖屏/横屏检测的原理是通过可视区的宽度和高度之间的比例进行检测的。但在移动端中可能会出现问题,比如点击一个文本输入框的时候,会弹出键盘,这个键盘会影响屏幕可是区域的宽高,这种情况会造成竖屏/横屏检测错误。
样式引入方式
样式表末尾添加
1
|
@media all and (min-width:600px){ }
|
link标签
1
|
<link rel='stylesheet' href='css/01.css' media='all and (min-width:600px)' />
|
写在样式表头部
1
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<style>
@import url(01.css) (min-width:400px); @import url(02.css) (min-width:600px); @import url(03.css) (min-width:800px); @import url(04.css) (min-width:1000px); body{ margin: 0; } div{ height: 100px; background-color: #f00; border: 1px solid #000; box-sizing: border-box; float: left; } </style> |
https://www.w3.org/2010/05/video/mediaevents.html
常用的几种屏幕宽度设定:
1
2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
@media screen and (min-width: 1200px) {
css-code; } @media screen and(min-width: 960px) and (max-width: 1199px) { css-code; } @media screen and(min-width: 768px) and (max-width: 959px) { css-code; } @media screen and(min-width: 480px) and (max-width: 767px) { css-code; } @media screen and (max-width: 479px) { css-code; } |
最新文章
- Spring bean依赖注入、bean的装配及相关注解
- LL谱面分析和难度标定
- Cosh.2
- 【MySQL】优化—工欲善其事,必先利其器之EXPLAIN
- IFE 百度前端技术学院 2016年春季班作业 第一阶段任务(1-4)的总结
- 元素设置position:fixed属性后IE下宽度无法100%延伸
- 【数据结构和算法】 O(1)时间取得栈中的最大 / 最小元素值
- [itint5]摆放窗口
- ACM一些题目
- js字的数目的计算方法(与word计算公式为)
- 【javascript】异步编年史,从“纯回调”到Promise
- Eclipse背景颜色改动
- pat 1001-1010
- springboot解决文件上传大小限制
- spring boot 连接mysql mongodb with jpa
- linux内核分析字符集实践报告
- u-boot移植(十)---代码修改---支持nor flash
- 010-java 表单方式或者base64方式上传图片,后端使用nutz的post转发图片到另一个请求
- C#中如何实现json转化时只处理部分属性
- Gimbal Lock
热门文章
- 08_STP(数通华为)
- Linux OOM一二三
- 再见Spring Boot 1.x
- mercurial branch name use integer as a name
- CentOS 7.5安装ANSYS 19.2
- <;每日 1 OJ>; -Table
- Spring 注解@Value详解
- PHP系列 | PDO::prepare(): send of 68 bytes failed with errno=32 Broken pipe
- MLflow系列1:MLflow入门教程(Python)
- 异常值检测方法(Z-score,DBSCAN,孤立森林)