在css中使用@media screen 通过检索宽度 对应改变html中class的css属性。

1280分辨率以上(大于1200px)

@media screen and (min-width:1200px){
  .content{ width: 1100px; height:500px;}
  .left{width:500px;hegith:1000px;background:#000;}
  .right{width:500px;hegith:1000px; marigin-left:100px; background:#000;}
}

1100分辨率(大于960px,小于1199px)

@media screen and (min-width: 960px) and (max-width: 1199px) {
  .content{ width: 1100px; height:500px;}
  .left{width:500px;hegith:1000px;background:#666;}
  .right{width:500px;hegith:1000px; marigin-left:100px; background:#666;}
}

标黄位置,当尺寸大于1200像素时候 HTML中的.left .right背景色会显示黑色

当尺寸在960~1199像素之间 HTML的.left .right 背景色会显示灰色



 
												

@media screen 自适应笔记的更多相关文章

  1. 利用@media screen实现网页布局的自适应

    利用@media screen实现网页布局的自适应 优点:无需插件和手机主题,对移动设备友好,能够适应各种窗口大小.只需在CSS中添加@media screen属性,根据浏览器宽度判断并输出不同的长宽 ...

  2. html自适应布局,@media screen,媒体查询

    html自适应布局,@media screen,媒体查询 自适应代码示例: <!doctype html> <html> <head> <meta chars ...

  3. 实现网页布局的自适应 利用@media screen

    利用@media screen实现网页布局的自适应,IE9一下不支持 @media screen /*1280分辨率以上(大于1200px)*/ @media screen and (min-widt ...

  4. @media screen页面自适应尺寸!!

    @media screen and (max-width:360px){body,input,select{font-size:38%}} @media screen and (min-width:3 ...

  5. [转载]利用@media screen实现网页布局的自适应,@media screen and

    开始研究响应式web设计,CSS3 Media Queries是入门.Media Queries,其作用就是允许添加表达式用以确定媒体的环境情况,以此来应用不同的样式表.换句话说,其允许我们在不改变内 ...

  6. 解决@media screen (自适应)IE浏览器不兼容问题

    1.解决兼容性问题 (1)页面最顶部必须定义:<!DOCTYPE html> (2)点击:下载 respond.js 文件 (3)引入<script src="respon ...

  7. 利用@media screen实现网页布局的自适应,@media screen and

    开始研究响应式web设计,CSS3 Media Queries是入门.Media Queries,其作用就是允许添加表达式用以确定媒体的环境情况,以此来应用不同的样式表.换句话说,其允许我们在不改变内 ...

  8. @media screen媒体查询实现页面自适应布局

    @media screen and (min-width:1200px){ //大于等于1200px才会进入 }   @media screen and (max-width:375px) { //小 ...

  9. media screen 响应式布局(知识点)

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

随机推荐

  1. 跨表更新,Mysql Update Join

    背景 项目新导入了一批人员数据,这些人的有的部门名称发生了变化,有的联系方式发生了变化,暂且称该表为t_dept_members, 系统中有另外一张表 t_user_info 记录了人员信息. 要求将 ...

  2. 算法_hdoj_1005

    Question: Super Jumping! Jumping! Jumping! Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 6 ...

  3. Coloring Colorfully

    问题 C: Coloring Colorfully 时间限制: 1 Sec  内存限制: 128 MB[提交] [状态] 题目描述 N块瓦片从左到右排成一行.每个块的初始颜色由长度为N的字符串S表示. ...

  4. D. Easy Problem dp(有衔接关系的dp(类似于分类讨论) )

    D. Easy Problem dp(有衔接关系的dp(类似于分类讨论) ) 题意 给出一个串 给出删除每一个字符的代价问使得串里面没有hard的子序列需要付出的最小代价(子序列不连续也行) 思路 要 ...

  5. IDEA中进行远程调试springboot项目

    1.以debug的模式启动Springboot项目 命令  java -Xdebug -Xrunjdwp:server=y,transport=dt_socket,address=8888,suspe ...

  6. 【转载】C/C++内存管理详解

    转自:http://chenqx.github.io/2014/09/25/Cpp-Memory-Management/ 内存管理是C++最令人切齿痛恨的问题,也是C++最有争议的问题,C++高手从中 ...

  7. 题解 P3951 小凯的疑惑

    P3951 小凯的疑惑 数论极菜的小萌新我刚看这题时看不懂exgcd做法的题解,后来在网上找到了一篇博客,感觉代码和推导都更加清新易懂,于是在它的基础上写了题解qwq 分析 两数互质,且有无限个,想到 ...

  8. arcgis计算X坐标值、Y坐标值

    arcgis计算X坐标值.Y坐标值 要计算的字段上点击右键,选择计算几何,弹出计算几何对话框.可以设置属性.坐标系.单位等.

  9. 1.3 eclipse快捷键

    来源:http://blog.csdn.net/dashuxiaoai/article/details/8737928 另:Eclipse快捷键 10个最有用的快捷键  http://www.cnbl ...

  10. redis哈希操作

    用户可以通过执行hset命令为哈希中的指定字段设置值: 127.0.0.1:6379> hset hash field value 根据给定的字段是否存在于散列中,hset命令的行为也会有所不同 ...