核心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样式的更多相关文章

  1. 响应式布局(css,js,php等方法),根据媒体类型设计不同的样式,css在线手册

    [css3在线手册]http://css.doyoe.com/ http://blog.csdn.net/duchao123duchao/article/details/52638506  [根据判断 ...

  2. css中响应式布局中样式的代码书写方法

    代码示例:@media only screen and (min-width: 320px){ html { font-size: 8px !important; } .mulu-zi{ positi ...

  3. HTML5 respond.js 解决IE6~8的响应式布局问题

    HTML5 respond.js 解决IE6~8的响应式布局问题   响 应式布局,理想状态是,对PC/移动各种终端进行响应.媒体查询的支持程度是IE9+以及其他现代的浏览器,但是IE8在市场当中仍然 ...

  4. 响应式布局和BootStrap 全局CSS样式

    1.什么是响应式布局 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,这个概念是为解决移动互联网浏览而诞生的. 简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一 ...

  5. 14、响应式布局和BootStrap 全局CSS样式知识点总结-part1

    1.什么是响应式布局 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,这个概念是为解决移动互联网浏览而诞生的. 简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一 ...

  6. 15、响应式布局和BootStrap 全局CSS样式知识点总结-part2

    1.表格 <div class="container"> <table class="table "> <thead> &l ...

  7. 一步步开发自己的博客 .NET版 剧终篇(6、响应式布局 和 自定义样式)

    前言 这次开发的博客主要功能或特点:    第一:可以兼容各终端,特别是手机端.    第二:到时会用到大量html5,炫啊.    第三:导入博客园的精华文章,并做分类.(不要封我)    第四:做 ...

  8. css响应式布局RWD

    响应式布局结合了三大理念: 1)用于布局的弹性网络(百分比定义宽度) 2)用于图片和视频的弹性媒体 3)媒体查询 在布局中,需要注意的点有: 1)尽量用min-width/max-width,max- ...

  9. CSS:使用CSS媒体查询创建响应式布局

    现如今在Web前端领域,BootStrap是一个最流行的UI库,其12列的栅栏系统为响应式布局提供了一种对程序员来说很好操作的模式. 追究Bootstrap的内在原理,其实就是通过媒体查询来完成对不同 ...

随机推荐

  1. Robot Framework使用For循环

    1.普通的For循环 在一个普通的For循环中,循环开始的关键字是 :FOR ,其中的:用于与一般关键字做区分,对于循环结构体内的每一行,使用 \ 作为改行的行首关键字.对于循环中的变量,可以在 IN ...

  2. 【每日一题】 UVA - 1587 Box 二维有点偏序的感觉

    一开始用set存xjb分类讨论,然后wa, 然后简化了一点,改用vector,然wa 最后又发现没有初始化,然wa wa了一个半小时 最后看了题解orz 然后找了一组样例把自己的代码改对了 /* 1 ...

  3. ZOJ - 2853 Evolution 线性变换变成矩阵快速幂

    题意:给你N个数,1~N分别为num[i],  以及T个 (i,j,P) 对于每组(i,j,P),让你将  num[i] 减去 P*num[i]  再把 P*num[i] 加到 num[j] 上.T个 ...

  4. express 写一个简单的web app

    之前写过一个简单的web app, 能够完成注册登录,展示列表,CURD 但是版本好像旧了,今天想写一个简单的API 供移动端调用 1.下载最新的node https://nodejs.org/zh- ...

  5. malloc函数 链表

    https://baike.baidu.com/item/malloc函数 malloc的全称是memory allocation,中文叫动态内存分配,用于申请一块连续的指定大小的内存块区域以void ...

  6. Java 输入/输出——字节流和字符流

    1.流的分类 (1)输入流和输出流(划分输入/输出流时是从程序运行所在内存的角度来考虑的) 输入流:只能从中读取数据,而不能向其写入数据. 输出流:只能向其写入数据,而不能从中读取数据. 输入流主要由 ...

  7. [adminitrative][archlinux][setfont] 设置console的字体大小

    电脑的分辨率高了之后,用命令行进入的时候,完全看不清楚,是否容易导致眼瞎. 第一步便把字体调大就成了很必要的操作. 使用一个命令能马上生效: setfont 使用配置文件 /etc/vconsole. ...

  8. Python不使用int()函数把字符串转换为数字

    Python不使用int()函数把字符串转换为数字 2018年05月21日 14:18:45 边缘ob边缘ob 阅读数:1035 https://blog.csdn.net/qq_33192555/a ...

  9. 怎么使用JavaScript进行进制转换

    JS 是一个很神奇的语言,内制的的很多函数可以帮我们进行数(进)制转换: JS中可以直接使用16进制: var a = 0xff; //255 将任意进制字符串转换为十进制,如二进制,八进制,十六进制 ...

  10. Performance Tuning MySQL

    通常来说,MySQL性能调优是非常复杂的一件事,不是简单的修改参数就可以完成的.需要综合考虑.而且找出性能瓶颈也非易事.但是通常我们有以下的几种方法找到蛛丝马迹.通过下面的几种方法发现瓶颈以后,我们才 ...