响应式布局css样式
核心css
/*图片列表样式*/
.img-list{ margin:-15px 0 0 -15px; *display:inline-block; }
/*响应式布局*/
@media screen and (min-device-width: 1161px) { //针对电脑端大分辨率 最小1161像素,使用大括号内的样式
.img-list {
width: 940px;
margin-top: -15px;
margin: -15px 0 0 -15px;
*display: inline-block;
}
} @media screen and (max-device-width: 400px) { //如果屏幕宽度小于400像素,则使用大括号内的样式
.img-list {
width: 708px;
margin-top: -15px;
margin: -15px 0 0 -15px;
*display: inline-block;
}
}
参考:https://www.cnblogs.com/BearLee/p/7928860.html
响应式布局css样式的更多相关文章
- 响应式布局(css,js,php等方法),根据媒体类型设计不同的样式,css在线手册
[css3在线手册]http://css.doyoe.com/ http://blog.csdn.net/duchao123duchao/article/details/52638506 [根据判断 ...
- css中响应式布局中样式的代码书写方法
代码示例:@media only screen and (min-width: 320px){ html { font-size: 8px !important; } .mulu-zi{ positi ...
- HTML5 respond.js 解决IE6~8的响应式布局问题
HTML5 respond.js 解决IE6~8的响应式布局问题 响 应式布局,理想状态是,对PC/移动各种终端进行响应.媒体查询的支持程度是IE9+以及其他现代的浏览器,但是IE8在市场当中仍然 ...
- 响应式布局和BootStrap 全局CSS样式
1.什么是响应式布局 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,这个概念是为解决移动互联网浏览而诞生的. 简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一 ...
- 14、响应式布局和BootStrap 全局CSS样式知识点总结-part1
1.什么是响应式布局 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,这个概念是为解决移动互联网浏览而诞生的. 简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一 ...
- 15、响应式布局和BootStrap 全局CSS样式知识点总结-part2
1.表格 <div class="container"> <table class="table "> <thead> &l ...
- 一步步开发自己的博客 .NET版 剧终篇(6、响应式布局 和 自定义样式)
前言 这次开发的博客主要功能或特点: 第一:可以兼容各终端,特别是手机端. 第二:到时会用到大量html5,炫啊. 第三:导入博客园的精华文章,并做分类.(不要封我) 第四:做 ...
- css响应式布局RWD
响应式布局结合了三大理念: 1)用于布局的弹性网络(百分比定义宽度) 2)用于图片和视频的弹性媒体 3)媒体查询 在布局中,需要注意的点有: 1)尽量用min-width/max-width,max- ...
- CSS:使用CSS媒体查询创建响应式布局
现如今在Web前端领域,BootStrap是一个最流行的UI库,其12列的栅栏系统为响应式布局提供了一种对程序员来说很好操作的模式. 追究Bootstrap的内在原理,其实就是通过媒体查询来完成对不同 ...
随机推荐
- [No0000113]Keyboard shortcuts for Windows Visual Studio Code
General 常用Ctrl+Shift+P, F1 Show Command Palette 显示命令行Ctrl+P Quick Open, Go to File… 快速打开Ctrl+Shift+N ...
- 存储空间消耗磁盘比较 int varchar date
小结: 1.日期类型按照date存储节省空间,仅3字节,而按照字符串型char 8字节 20190316 , varchar 20190316 9字节: 2.对于小于32768的整数,按照smal ...
- [daily][editer] 二进制编辑工具 hyx
用了众多之后,终于发现了一个好用的二进制编辑工具: hyx https://yx7.cc/code/ https://en.wikipedia.org/wiki/Comparison_of_hex_e ...
- 彻底卸载tv
1.卸载 2.C:\Program Files (x86),找到teamviewer选项,右击删除 3.开始--输入regedit,打开注册表,找到如下路径:HKEY_LOCAL_MACHINE\SO ...
- overridePendingTransition
通过调用overridePendingTransition() 可以实时修改Activity的切换动画. 注意:该函数必须在Activity的onCreate()中调用或者finish()后立即调用.
- linux 查看网卡流量:nload
nload命令用于查看网卡流量,用法如下: [root@mysql test]# yum install -y epel-release [root@mysql test]# yum install ...
- 升级my.cnf注意
升级my.cnf注意 mkdir -p /ngbs/data/{logs,tmp} vi /etc/init.d/mysqlbasedir=/usr/local/mysql datadir=/ngb ...
- python安装talib库
简便安装方法 最简单的安装方式: $ pip install TA-Lib 用setup.py的方式自己安装一个源文件 $ python setup.py install 有可能遇到的问题 func. ...
- Python递归优化方法
递归栈溢出 Python的递归调用栈的深度有限制,默认深度为998,可以通过sys.getrecursionlimit()查看. 针对递归栈溢出,我们可以将默认深度设置为大一些,这样不会报错,但是再大 ...
- SQL 流水账余额查询
创建表 CREATE TABLE [dbo].[test]( ,) NOT NULL, [RQ] [date] NULL, [SR] [int] NULL, [ZC] [int] NULL ) ON ...