响应式布局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的内在原理,其实就是通过媒体查询来完成对不同 ...
随机推荐
- ubuntu16.04下安装opencv3.4.1及其扩展模块
1.源文件下载 opencv-3.4.1.tar.gz(https://github.com/opencv/opencv/releases) opencv_contrib-3.4.1.tar.gz(h ...
- 制作tomcat重启.bat文件
环境是在windows下,linux不知道,没有尝试过,有机会去试试哈哈 首先创建一个restart.bat文件 创建在哪里看你开心咯 然后用记事本打开 输入以下源代码: @echo off cd / ...
- Codeforces 180C - Letter - [简单DP]
题目链接:http://codeforces.com/problemset/problem/180/C 题意: 有一段字符串,包含大小写字母,每次可以将其中一个字母由大写变成小写,或者小写变成大写.要 ...
- A little issue in Mathematical Thought from Ancient to Modern Times, Vol. 3
At P985 of the book, says But there are cuts that are not determined by rational numbers. If we put ...
- php之二叉树
二叉树的特点: ①.每个节点最多有两个子树,所以二叉树中不存在度大于2的节点.注意不是只有两个子树,最多有两个子树,没有子树或者只有一颗子树都是可以的. ②左子树和右子树是有顺序的. ③即使树中只有一 ...
- [administrative][CentOS][NetworkManager] 万恶的NetworkManager到底怎么用
这好像是第三次不得不去学会NetworkManager的用法,可是它真的很难用.社区里无人不吐槽. 然而,还是要用! 这次从redhat的文档入手,也许可以成功 --! https://access. ...
- [daily][CentOS][SELinux]用key免登陆不成功,原来是SElinux在搞事情
为了提高效率,一般情况下,会把公钥放到sshd主机的 $HOME/.ssh/authorized_keys 文件内. 把私钥放在client的 $HOME/.ssh/ 下. 然后就可以免密登录了.然而 ...
- 流计算技术实战 - CEP
CEP,Complex event processing Wiki定义 "Complex event processing, or CEP, is event processing that ...
- 洛谷P3245 大数 [HNOI2016] 莫队
正解:莫队 解题报告: 传送门 这题首先要发现一个结论,是这样儿的: 若p不是10的约数(即2和5) 时,当第i位到第n位组成的数%p==第j位到第n位组成的数%p,那么第i位到第j位上的数组成的数% ...
- android下的样式
android中控件,假如我们把样式都写死在控件的配置文件上的话.一旦改动可谓牵一发而动千军.那么我们能够把样式写在style.xml文件里.然后引用,在API14以上版本号. 该文件位于values ...