@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. (转) c++ 迭代器

    原地址:http://www.cnblogs.com/marchtea/archive/2012/02/27/2370068.html 前言: 以下的内容为我阅读c++沉思录18,19,20章的笔记以 ...

  2. GDI 开发的准备工作

    1 需要的链接库和头文件 大部分函数在 Gdi.dll 和 Gdi32.dll 提供.相关的函数接口和结构都在 Wingdi.h 文件中(如果工程中已包含 Windows.h 就不需要再包含了,因为 ...

  3. self和this的不同

    在Java和C++中,this总是指的是当前实例地址,而在静态方法也就是类方法中,是不可以使用this的.在Objectvie-C中,self是既可以出现在实例方法中,也可以出现在类方法中,并且在不同 ...

  4. 【solr基础教程之九】客户端

    一.Java Script 1.由于Solr本身可以返回Json格式的结果,而JavaScript对于处理Json数据具有天然的优势,因此使用JavaScript实现Solr客户端是一个很好的选择. ...

  5. CSS3动画之无缝滚动

    与js的无缝滚动类似,整个承载图片的盒子移动,克隆一组图片放置最后,当一组图片播放结束后将盒子定位在有一组图片宽度的左侧 HTML结构: <div class="box"&g ...

  6. js 原型

    1: function Person (name,age) { 2: this.name = name; 3: this.age = age; 4: } 5:   6: Person.prototyp ...

  7. PHP自动生成前端的表单框架

    <?php /** * 为当前所在菜单项样式 * @param string $controller_name * @param string $action_name * @param str ...

  8. ZendFramework 环境部署

    查看源码 int_autoloader.php 文件中,发现应用了一个 AutoloaderFactory 的命名空间,路径写得是相对路径,所以需要在 php.ini 中定义一个 inclde_pat ...

  9. Python爬虫学习:四、headers和data的获取

    之前在学习爬虫时,偶尔会遇到一些问题是有些网站需要登录后才能爬取内容,有的网站会识别是否是由浏览器发出的请求. 一.headers的获取 就以博客园的首页为例:http://www.cnblogs.c ...

  10. java的GUI编程

    目前有三种创建模版产生应用窗体: 第一种: public class MenuDemo implements ActionListener{ //你的组件(成员变量) public MenuDemo( ...