css3响应式布局教程—css3响应式
响应式布局
一个网站能够兼容多个终端,并且在各个终端都可以很好展示体验。
媒体类型
在何种设备或者软件上将页面打开
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; } |
css3响应式布局教程—css3响应式的更多相关文章
- html响应式布局,css响应式布局,响应式布局入门
html响应式布局,css响应式布局,响应式布局入门 >>>>>>>>>>>>>>>>>>& ...
- 响应式布局(CSS3弹性盒flex布局模型)
传统的布局方式都是基于盒模型的 利用display.position.float来布局有一定局限性 比如说实现自适应垂直居中 随着响应式布局的流行,CSS3引入了更加灵活的弹性布局模型 flex弹性布 ...
- 移动端响应式布局--你不知道的CSS3.0媒体查询,解决rem部分情况下无法适配的场景
媒体查询作为响应式布局的方法之一,实际项目中用途也很广.但是你真的知道怎么用吗? 例如,下面匹配 iphone6/7/8 屏幕 @media screen and (max-width: 375px) ...
- HTML5入门教程:响应式页面布局
摘自:https://www.sohu.com/a/225633935_647584 随着互联网时代的发展,我们对网页布局有了新的要求,大气,美观,能够在不同的设备上呈现令人焕然一新的效果.此时,一个 ...
- 一步步开发自己的博客 .NET版 剧终篇(6、响应式布局 和 自定义样式)
前言 这次开发的博客主要功能或特点: 第一:可以兼容各终端,特别是手机端. 第二:到时会用到大量html5,炫啊. 第三:导入博客园的精华文章,并做分类.(不要封我) 第四:做 ...
- 移动Web之响应式布局的探讨
响应式布局的探讨 响应式布局的两种方式 基于百分比的布局 例:Bootstrap 基于rem的布局 例:淘宝触屏版 这两种布局都需要依赖于CSS3的media query来设置布局断点(或者通过js监 ...
- HTML5学习总结-番外05 响应式布局
1. 响应式布局 响应式布局是2015年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端,而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网浏览而诞生的.其目的是为用户提欧共更加 ...
- 移动web之响应式布局
1.响应式布局的概念 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念.简而言之.就是一个站点可以兼容多个终端--而不是为每一个终端做一个特定的版本号. 这个概念是为解决移动互 ...
- Bootstrap响应式布局介绍
一.响应式布局 1.什么是响应式网页 2.响应式网页必须做到的几件事 1.布局,使用流式布局(默认文档流+浮动)+弹性布局+栅格布局 2.文字和图片大小随着容器大小改变 3.媒体查询技术(css3) ...
随机推荐
- Numpy | 11 迭代数组
NumPy 迭代器对象 numpy.nditer 提供了一种灵活访问一个或者多个数组元素的方式. 迭代器最基本的任务的可以完成对数组元素的访问. 实例1:使用 arange() 函数创建一个 2x3 ...
- 【概率DP】$P2059$ 卡牌游戏
链接 题目描述 N个人坐成一圈玩游戏.一开始我们把所有玩家按顺时针从1到N编号.首先第一回合是玩家1作为庄家.每个回合庄家都会随机(即按相等的概率)从卡牌堆里选择一张卡片,假设卡片上的数字为X,则庄家 ...
- linux下 调试C#代码
参考两位大神的帖子: https://blog.csdn.net/soband_xiang/article/details/82914195 https://blog.csdn.net/weixin_ ...
- shell 四则运算
test.sh #/bin/bash read -p "请输入第一个数:" a read -p "请输入第二个数:" b if [ $a -gt $b ] th ...
- 【POJ1426】Find The Multiple
本题传送门 本题知识点:深度优先搜索 | 宽度优先搜索 题意很简单,让我们找一个只有1和0组成的十位数是n的倍数的数. 这题一开始吓到我了--因为Output里说输出的长度最长不超过100位???那是 ...
- Android开发:文本控件详解——TextView(二)文字跑马灯效果实现
一.需要使用的属性: 1.android:ellipsize 作用:若文字过长,控制该控件如何显示. 对于同样的文字“Android开发:文本控件详解——TextView(二)文字跑马灯效果实现”,不 ...
- WPF——OXY绘图_old
plotModel = new PlotModel() { Title = "数据统计", LegendTitle = "Max:红色,Min:黄色", Leg ...
- 真机调试No target device的解决(android studio)3.4.1
驱动等都正常,手机连接正常.但是还是报错 搜索到如下办法成功解决:adb未启动或启动失败,这时候选择android studio界面底端的logcat,会自动重启adb.
- mysql 大小写不敏感
lower-case-table-names=1 变量lower-case-table-names的取值 取值范围有三个,分别是0.1.2. 1. 设置成0:表名按你写的SQL大小写存储,大写就大写小 ...
- HIVE出现Read past end of RLE integer from compressed stream Stream for column 1 kind LENGTH position: 359 length: 359 range: 0错误
错误日志 Diagnostic Messages for this Task: Error: java.io.IOException: java.io.IOException: java.io.EOF ...