/*当屏幕小于1200px*/

@media (max-width:1200px) { ...}

此处针对所有小于1200px屏幕的css属性。

/*当屏幕小于1200px且大于992px*/

@media (min-width: 992px) and (max-width: 1200px) {...}

此处针对992~1200px屏幕的css属性,当屏幕小于992时会继续引用默认的css属性,除非重新设置屏幕小于992的CSS属性。

如何根据屏幕大小改变class的css样式的更多相关文章

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

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

  2. 用JS改变的元素CSS样式,css里display :none 隐藏 block 显示

    CSS样式的引用有3种方式:style引用.class引用.id引用,所以js改变元素的样式我们也分3种来说. 1.js改变由style方式引用的样式:方法一:document.divs.style. ...

  3. 记一道css面试题 : 三栏布局两边宽度固定,中间宽度自适应,并且布局随屏幕大小改变。

    前几天面试时有道css题没做出来,回来好好学习一番后把其记录下来. 题目是这样的:左中右三栏布局,左右两栏宽度固定,左右两栏的宽度为200像素,中间栏宽度自适应.当屏幕小于600px时,3栏会分别占用 ...

  4. js通过查看屏幕大小,更改其他css属性

    首先,我们要知道如何得到屏幕的相关数据. <html><head><title>获取当前对象大小以及屏幕分辨率等</title><body> ...

  5. jquery改变多个css样式

    <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax ...

  6. 根据判断PC浏览器类型和手机屏幕像素自动调用不同CSS的代码

    1.媒体查询方法在 css 里面这样写 -------------------- @media screen and (min-width: 320px) and (max-width: 480px) ...

  7. js改变css样式

      CreateTime--2017年10月31日15:14:12 Author:Marydon js改变css样式 1.js改变单个css样式 HTML部分 <div id="tes ...

  8. CSS样式表及选择器相关内容(一)

    CSS(Cascading Style Sheets)层叠样式表1.CSS级联-CSS层叠:规定在哪个HTML中使用哪个样式. body{ font-size:16px; //body默认字体大小 } ...

  9. rem、em 、font-size随着屏幕大小的改变而改变

    rem  的根标签是html 以html标签上设置的font-size的值为参考点 如: <div id="app"> <div id="son> ...

随机推荐

  1. Apache配置HTTPS功能

    apache配置https 一.yum 安装openssl和openssl-devel,httpd-devel 二.生成证书(也可以从公司的证书颁发机构获取): #建立服务器密钥 openssl ge ...

  2. mybatis int 类型判断<if>

    如果数据类型是integer或者int,也就是数据类型的,在用<if>标签做动态语句的时候 不用判断是否为"''" <if test="sex != n ...

  3. ./yy.sh -d bash 执行脚本时所加的参数

    -e filename 如果 filename存在,则为真 -d filename 如果 filename为目录,则为真 -f filename 如果 filename为常规文件,则为真 -L fil ...

  4. Java数据库——使用元数据分析数据库

    在JDBC中提供了DatabaseMetaData和ResultSetMetaData接口来分析数据库的元数据. DatabaseMetaData 使用DatabaseMetaData取得数据库的元信 ...

  5. ecshop广告-》单张,多张

    //读取广告 function get_ad_id($ad_id){ //读取指定ad_id广告 $sql = 'select * from '. $GLOBALS['ecs']->table( ...

  6. 字体投影(test-shadow)与框架投影(box-shadow)

    字体投影:text-shadow: 1px 1px 1px #ccc; 框架投影:box-shadow: 10px 10px 25px #ccc;

  7. LSM存储模型

    LSM存储模型 数据库有3种基本的存储引擎: 哈希表,支持增.删.改以及随机读取操作,但不支持顺序扫描,对应的存储系统为key-value存储系统.对于key-value的插入以及查询,哈希表的复杂度 ...

  8. Pycharm 使用

    Pycharm基本使用http://edu.51cto.com/index.php?do=lession&id=118722   Pycharm的基本使用 在Pycharm下为你的Python ...

  9. 在yii2验证之前执行一些额外自定义验证

    <?php $form = ActiveForm::begin([ 'id' => $model->formName(), 'action' => ['/apitools/de ...

  10. Sql2008R2设置远程链接

    下边的文章是从百度经验里粘过来的.. 经过测试确实有效..留个备份.. 有个小情况在前边说一下.. 在操作前一定要确定自己的sa用户密码是不是一样..不要以为自己知道的是对的就直接略过某些步骤.. 俗 ...