@media screen 自适应笔记
在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 自适应笔记的更多相关文章
- 利用@media screen实现网页布局的自适应
利用@media screen实现网页布局的自适应 优点:无需插件和手机主题,对移动设备友好,能够适应各种窗口大小.只需在CSS中添加@media screen属性,根据浏览器宽度判断并输出不同的长宽 ...
- html自适应布局,@media screen,媒体查询
html自适应布局,@media screen,媒体查询 自适应代码示例: <!doctype html> <html> <head> <meta chars ...
- 实现网页布局的自适应 利用@media screen
利用@media screen实现网页布局的自适应,IE9一下不支持 @media screen /*1280分辨率以上(大于1200px)*/ @media screen and (min-widt ...
- @media screen页面自适应尺寸!!
@media screen and (max-width:360px){body,input,select{font-size:38%}} @media screen and (min-width:3 ...
- [转载]利用@media screen实现网页布局的自适应,@media screen and
开始研究响应式web设计,CSS3 Media Queries是入门.Media Queries,其作用就是允许添加表达式用以确定媒体的环境情况,以此来应用不同的样式表.换句话说,其允许我们在不改变内 ...
- 解决@media screen (自适应)IE浏览器不兼容问题
1.解决兼容性问题 (1)页面最顶部必须定义:<!DOCTYPE html> (2)点击:下载 respond.js 文件 (3)引入<script src="respon ...
- 利用@media screen实现网页布局的自适应,@media screen and
开始研究响应式web设计,CSS3 Media Queries是入门.Media Queries,其作用就是允许添加表达式用以确定媒体的环境情况,以此来应用不同的样式表.换句话说,其允许我们在不改变内 ...
- @media screen媒体查询实现页面自适应布局
@media screen and (min-width:1200px){ //大于等于1200px才会进入 } @media screen and (max-width:375px) { //小 ...
- media screen 响应式布局(知识点)
一.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网 ...
随机推荐
- 跨表更新,Mysql Update Join
背景 项目新导入了一批人员数据,这些人的有的部门名称发生了变化,有的联系方式发生了变化,暂且称该表为t_dept_members, 系统中有另外一张表 t_user_info 记录了人员信息. 要求将 ...
- 算法_hdoj_1005
Question: Super Jumping! Jumping! Jumping! Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 6 ...
- Coloring Colorfully
问题 C: Coloring Colorfully 时间限制: 1 Sec 内存限制: 128 MB[提交] [状态] 题目描述 N块瓦片从左到右排成一行.每个块的初始颜色由长度为N的字符串S表示. ...
- D. Easy Problem dp(有衔接关系的dp(类似于分类讨论) )
D. Easy Problem dp(有衔接关系的dp(类似于分类讨论) ) 题意 给出一个串 给出删除每一个字符的代价问使得串里面没有hard的子序列需要付出的最小代价(子序列不连续也行) 思路 要 ...
- IDEA中进行远程调试springboot项目
1.以debug的模式启动Springboot项目 命令 java -Xdebug -Xrunjdwp:server=y,transport=dt_socket,address=8888,suspe ...
- 【转载】C/C++内存管理详解
转自:http://chenqx.github.io/2014/09/25/Cpp-Memory-Management/ 内存管理是C++最令人切齿痛恨的问题,也是C++最有争议的问题,C++高手从中 ...
- 题解 P3951 小凯的疑惑
P3951 小凯的疑惑 数论极菜的小萌新我刚看这题时看不懂exgcd做法的题解,后来在网上找到了一篇博客,感觉代码和推导都更加清新易懂,于是在它的基础上写了题解qwq 分析 两数互质,且有无限个,想到 ...
- arcgis计算X坐标值、Y坐标值
arcgis计算X坐标值.Y坐标值 要计算的字段上点击右键,选择计算几何,弹出计算几何对话框.可以设置属性.坐标系.单位等.
- 1.3 eclipse快捷键
来源:http://blog.csdn.net/dashuxiaoai/article/details/8737928 另:Eclipse快捷键 10个最有用的快捷键 http://www.cnbl ...
- redis哈希操作
用户可以通过执行hset命令为哈希中的指定字段设置值: 127.0.0.1:6379> hset hash field value 根据给定的字段是否存在于散列中,hset命令的行为也会有所不同 ...