@media screen and (判断属性){ CSS样式选择器 }

例如:

<div class="silder_photo"></div>

<style> 

.silder_photo{width:100%;}
@media screen and (min-width: 1501px) {
  .silder_photo{left:20%;}
 }

/* css注释:设置了浏览器宽度不小于1501px时 silder_photo显示20%宽度 */

@media screen and (max-width: 1501px) {
  .silder_photo{left:5%;}
}

/* css注释:设置了浏览器宽度小于1501px时 silder_photo显示5%宽度 */

</style>

不同css样式适应不同屏幕大小实现自适应宽度的更多相关文章

  1. IE对CSS样式的数量和大小的限制

    项目中遇到的问题,css写的样式无法渲染,各种百度后发现大概是这个原因: IE对CSS样式的数量和大小的限制 文档中只有前31个link或style标记关联的CSS能够应用. 从第32个开始,其标记关 ...

  2. 利用onresize使得div可以随着屏幕大小而自适应的代码

    原文:http://www.jb51.net/article/21831.htm 当我们让div居中时候,一般有两种方法,一种是固定左右宽度,也就是使用像素绝对定位:另一种是用百分比来相对定位,在这种 ...

  3. css布局:左边固定宽度,右边自适应宽度或右侧固定,左侧自适应三种方法

    方法一:浮动布局 这种方法我采用的是左边浮动,右边加上一个margin-left值,让他实现左边固定,右边自适应的布局效果 HTML Markup <div id="left" ...

  4. CSS样式案例(1)-文字的排版

    本篇介绍的是小窗文字内容的排版,通过该篇文章可以让小伙伴们熟悉以下几个知识点: word-space.overflow.text-overflow. 最终的展示效果如下: 参考步骤: 1. 建立htm ...

  5. 如何根据屏幕大小改变class的css样式

    /*当屏幕小于1200px*/ @media (max-width:1200px) { ...} 此处针对所有小于1200px屏幕的css属性. /*当屏幕小于1200px且大于992px*/ @me ...

  6. CSS 屏幕大小自适应

    要想实现css屏幕大小自适应,首先得引入 CSS3 @media 媒体查询器: media的使用和规则: ①被链接文档将显示在什么设备上. ②用于为不同的媒介类型规定不同的样式. 语法:  @medi ...

  7. html 网页背景图片根据屏幕大小CSS自动缩放

    https://blog.csdn.net/coslay/article/details/47109281 腾讯微博和QQ空间的登录背景图片是根据访客的屏幕大小自动缩放的,但是好像是用JQuery代码 ...

  8. js 根据屏幕大小调用不同的css文件

    原因:屏幕大小不一样,网站看起来总觉得怪怪的,所以,针对不同大小的屏幕,写了不同的css,写完了,要解决的问题就是:怎么根据屏幕的大小来引用不同的CSS,下面就是解决方法了. 解决方法:首先,在hea ...

  9. bootstrap-全局css样式

    bootstrap-全局css样式   1.bootstrap是一个前端框架 2.基本模板:viewport视口可以解决移动端设备网页自适应问题 3.版心(.container)  流式版心(.con ...

随机推荐

  1. linux 系统下java开发环境的配置

    在安装之前,确保你的linux系统下有 jdk,jboss等相关软件 一.配置JDK环境变量 步骤: 解压缩JDK文件: unzip jdk1.6.0_31.zip 目录下显示文件夹jdk1.6.0_ ...

  2. 使用正则表达式限制swing (JTextField等) 的输入

    之前使用Qt编写Gui程序的时候,可以直接使用正则表达式限制所有输入框,非常方便. 这段时间要做一份课程设计,使用java编写,ui要限制输入,比如只能输入x位数字,输入身份证等. 百度了许多资料,发 ...

  3. (转)ubuntu下如何查看和设置分辨率

    转载请注明出处: http://www.cnblogs.com/darkknightzh/p/5681159.html 原网址: http://www.2cto.com/os/201303/19397 ...

  4. Bootstrap 静态分页 和 jquery_pagination插件 动态分页

    第一种Bootstrap 实例 - 默认的分页 <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - ...

  5. [C++程序设计]指针总结

  6. ANDROID 开机启动VNC SERVER

    ANDROID 开机启动VNC SERVER 背景信息: 最近在做一个项目,在项目需求中有这么一项“要把VNC SERVER 添加到android里并让其开机自启动”.其实做这个项目也挺缚手缚脚的,因 ...

  7. “弹出DVD驱动器错误”解决方法

    错误描述:(win7环境) 买了个开发板,赠送了一些光盘,放在电脑光驱中打开后,电脑就疯狂响,可能是光盘质量太差.用完后在弹出时显示“弹出DVD驱动器错误”[见图1].直接按主机上弹出按钮也没有反应. ...

  8. C语言IO操作总结

    C语言IO操作总结C程序将输入看做字节流,流的来源是文件.输入设备.或者另一程序的输入:C程序将输出也看做字节流:流的目的是文件.视频显示等: 文件处理:1 :fopen("filename ...

  9. Unix/Linux环境C编程入门教程(33) 命令和鼠标管理用户和组

    Linux是一个多用户.多任务的实时操作系统,允许多人同时访问计算机, 并同时运行多个任务.UNIX系统具有稳定.高效.安全.方便.功能强大等诸多优点,自20世纪70年代开始便运行在许多大型和小型计算 ...

  10. VC使用#定义方便控制版本号的宏

    一个 VC Project 中,可能有很多地方需要用到版本号,比如 About 对话框.版本资源等.如果每次版本更改都一一去改变这些值,不但非常麻烦,而且有悖唯一原则. 巧妙地使用宏定义,可以很好地解 ...