核心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. dma传输数据长度,在启动前必须确保是一个大于0的数字

    否则将导致不能接受数据

  2. 如果是多个 c 代码的源码文件,编译方法如下: $ gcc test1.c test2.c -o main.out $ ./main.out test1.c 与 test2.c 是两个源代码文件。

    如果是多个 c 代码的源码文件,编译方法如下: $ gcc test1.c test2.c -o main.out $ ./main.out test1.c 与 test2.c 是两个源代码文件.

  3. idea出现无效的源发行版:11

    idea启动的时候报错: 点击->file->project structure->project

  4. postman客户端的安装与使用

    安装 首先下载蓝灯,为FQ做准备 登录github,输入https://github.com/getlantern/lantern,找到下载链接下载 安装并成功启动蓝灯 登录谷歌浏览器的应用市场,搜索 ...

  5. xadmin与django-rest-framework的集成(1)

    什么是xadmin?什么是django-rest-framework? xadmin是开源的一个类似于django自带的后台管理系统admin的开源模块,它基于bootstrap3框架,内置强大的插件 ...

  6. golang的json数据解析

    import (     "fmt"     "time"     "github.com/astaxie/beego"     " ...

  7. java 线程 (二) 线程池

    package cn.sasa.demo2; import java.util.concurrent.ExecutorService; import java.util.concurrent.Exec ...

  8. 关于webpack,babel,以及es6和commonJS之间的联系(转)

    add by zhj: babel是将es6转为es5,而webpack从名字也能看出来,是一个打包工具,根据文件之间的依赖关系,将文件进行打包 原文:https://blog.csdn.net/a2 ...

  9. 多点数据同步服务器sql汇总

    1. a表中是否存在c的列 IF COL_LENGTH('FeeType', 'ftName') IS NOT NULL select N'存在'as result ELSE select N'不存在 ...

  10. 002-pro ant design 表单基本使用、state赋值数据父子传输

    一.表单元素操作事项 1.form 默认在prop中存在:this.props.form,直接使用即可 2.重置:this.props.form.resetFields(); 3.赋值:form.se ...