css媒体查询和居中
1.媒体查询
@media语法规则
-1.概念:指定样式表规则用于指定的媒体类型和查询条件
-2.语法:@media screen and(width/min-width/max-width){}
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title><style>*{margin: 0px;padding: 0px;}@media screen and (max-width: 640px){.d1{width: 100%;height: 800px;background-color: aquamarine;}}@media screen and (min-width: 640px) and (max-width: 800px){.d1{width: 100%;height: 800px;background-color: red;}}@media screen and (min-width: 800px){.d1{width: 100%;height: 800px;background-color: bisque;}}</style> </head> <body><div class="d1"></div> </body> </html>
2.居中
-1.margin:0 auto;
-2.文字居中:line-height;text-align:center;
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title><style>html,body,ul{margin: 0;padding: 0;}.container{width: 100%;height: 70px;min-width: 996px;background-color: aqua;}.header{width: 80%;height: 70px;background-color: pink;min-width: 996px;margin: 0 auto;text-align: center;}ul {line-height: 70px;}ul li {display: inline-block;list-style-type: none;}</style> </head> <body><div class="container"><div class="header"><ul><li>列表项目</li><li>列表项目</li><li>列表项目</li><li>列表项目</li></ul></div></div> </body> </html>
-3.由table演变过来的一种居中
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title><style>.t{display: table;width: 200px;height: 200px;background-color: aqua;}p{display: table-cell;text-align: center;vertical-align: middle;}</style> </head> <body><div class="t"><p>haha</p></div> </body> </html>
-4.利用伸缩盒居中
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title><style>.outer{display: -webkit-box;width: 200px;height: 200px;background-color: aqua;-webkit-box-pack: center;-webkit-box-align: center;}.inner{display: -webkit-box ;width: 100px;height: 100px;background-color: pink;-webkit-box-pack: center;-webkit-box-align: center;}</style> </head> <body><div class="outer"><div class="inner">haha</div></div> </body> </html>
转载于:https://www.cnblogs.com/yangfanasp/p/7020312.html
css媒体查询和居中相关推荐
- 使用CSS 媒体查询功能满足不同屏幕分辨率要求
http://www.adobe.com/cn/devnet/dreamweaver/articles/dw_html5_pt3.html 这是探索Dreamweaver CS5.5的HTML5和CS ...
- css媒体查询(手机、平板、PC)
List item css媒体查询 PC端按屏幕尺寸整理? 通过上面的电脑屏蔽及尺寸的例表上我们得到了几个宽度 1024 1280 1366 1440 1680 1920 超小屏幕 手机 (<7 ...
- 响应式开发中合理选定CSS媒体查询分割点
本文响应式开发中合理选定CSS媒体查询分割点翻译自David Gilbertson的The-100%-Correct-Way-To-Do-CSS-breakpoints一文.本文唔看上去有些拗口,不过 ...
- 移动设备响应式网站之CSS媒体查询
http://www.ibm.com/developerworks/cn/web/wa-cssqueries/index.html 简介 现今每天都有更多的手机和平板电脑问市.消费者能够拥有可想象到的 ...
- IOS margin失效问题,以及CSS媒体查询区分iPhone 6、 iPhone8、iPhone8 Plus和iPhoneX
CSS媒体查询区分iPhone 6. iPhone8.iPhone8 Plus和iPhoneX /*iPhone6和iPhone8*/ @media only screen and (device-w ...
- css媒体查询的区间_CSS媒体查询
css媒体查询的区间 At-media queries are conditions in your stylesheet. The style rules they contain are appl ...
- CSS媒体查询详细解读
一 CSS媒体查询使用的背景: 现今每天都有更多的手机和平板电脑问市.消费者能够拥有可想象到的各种规格和形状的设备,但是网站开发人员却面临一个挑战:如何使他们的网站在传统浏览器.手机和平板电脑浏览器 ...
- CSS媒体查询:最大宽度或最大高度
本文翻译自:CSS media queries: max-width OR max-height When writing a CSS media query, is there any way yo ...
- media覆盖了css,为什么我的CSS媒体查询被忽略或覆盖?
这让我发疯!我看了一些关于Stackoverflow的问题,发现ID元素的优先级高于类元素(这很高兴知道,但是我感觉这不是我的问题).这是我苦苦挣扎的NAVIGATION菜单.(我使用最大宽度顺便说一 ...
- 什么是CSS媒体查询
什么是CSS媒体查询? 一.CSS媒体查询概念 CSS媒体查询即media quaries,可以针对不同的媒体类型定义不同的样式,从而实现响应式布局.也可以针对不同的分辨率定义不同的样式. 1024分 ...
最新文章
- qsql 关联_(十八)链接数据库,QSqlTableModel
- 在定义常量时,为什么推荐使用const,而不是#define?
- WinForm数据源分页技术
- 手动实现kt(java)同步工作流和异步工作流
- linux静态路由添加自启动,LINUX添加静态路由
- 【译】区块链是如何工作的——用JavaScript演示
- 百度Q3财报:净利润44亿元 重回增长轨道
- 2010_8_18_静态路由_静态路由路由排错(不连续地址汇总)
- DreamWeaver插件–Javascript文件美化、自动缩进
- 常用视频格式简述(RMVB\RM\WMV\ASF\AVI\MPEG1\MPEG2\MPEG4\MOV)
- 关于胶质母细胞瘤的影像组学和影像基因组学
- 打字慢?双拼了解一下!
- 多个图片如何批量转成文字版的Word
- iOS 屏幕旋转的实践解析
- python第八天 运算符的使用
- 目标检测之RFB Net
- Kettle之数据同步
- bzoj3899 弦论
- Lammps纳米压痕接触面积—Matlab接触面积计算(两种方法)
- win7系统没有计算机睡眠状态,win7旗舰版系统休眠模式和睡眠模式的区别