利用@media screen实现网页布局的自适应,IE9一下不支持 @media screen

/*1280分辨率以上(大于1200px)*/
@media screen and (min-width:1200px){
.p1{color: #f00};
}
/*1100分辨率(大于960px,小于1199px)*/
@media screen and (min-width: 960px) and (max-width: 1199px) {
.p2{color: #f00};
}
/*880分辨率(大于768px,小于959px)*/
@media screen and (min-width: 768px) and (max-width: 959px) {
.p3{color: #f00};
}
/*720分辨率(大于480px,小于767px)*/
@media only screen and (min-width: 480px) and (max-width: 767px){
.p4{color: #f00};
}
/*440分辨率以下(小于479px)*/
@media only screen and (max-width: 479px) {
.p5{color: #f00};
}

实现网页布局的自适应 利用@media screen的更多相关文章

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

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

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

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

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

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

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

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

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

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

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

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

  7. 利用media query写响应式布局

    最近才接触到响应式布局的概念,之前用到的bootstrap就是一种响应式布局的框架.学习的时候参考了http://blog.csdn.net/shoyer/article/details/829301 ...

  8. 利用css进行网页布局

    网页布局: 又称版式布局,是网页UI设计师将有限的视觉元素进行有机的排列组合,将理性的思维个性的化的表现出来,是一种具有个人艺术特色的视觉传达方式.传达信息的同时有美感.网页设计特点(相对纸媒来说). ...

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

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

随机推荐

  1. ASP.NET整体运行机制+asp.net请求管道+页面生命周期+MVC整体运行机制原理图

    在网上找的,个人感觉很好的

  2. Android学习笔记_60_Android常用ADB命令

    第一部分: 1. ubuntu下配置环境anroid变量: 在终端执行 sudo gedit /etc/profile 打开文本编辑器,在最后追加#set android environment 2. ...

  3. vim_preview_window

    *29.2*    The preview window When you edit code that contains a function call, you need to use the c ...

  4. js箭头函数

    ES6标准新增了一种新的函数:Arrow Function(箭头函数). 为什么叫Arrow Function?因为它的定义用的就是一个箭头 x =>x*x 相当于: function(x) { ...

  5. TCP套接字

    端口的概念 每个电脑一根网线,但是你挂着QQ的同时还可以浏览网页.两个不同应用的数据在同一根网线里是如何传输的呢?根据七层互联网模型,这个功能由运输层(TCP是运输层主要协议)实现.怎么实现呢,在网络 ...

  6. zepto 基础知识(5)

    81.width width() 类型:number width(value) 类型:self width(function(index,oldWidth){....}) 类型:self 获取对象集合 ...

  7. js如何判断数据类型

    1.最常见的判断方法:typeof console.log(typeof a) ------------> string console.log(typeof b) ------------&g ...

  8. [HAOI2010]软件安装(树形背包,tarjan缩点)

    题目描述 现在我们的手头有N个软件,对于一个软件i,它要占用Wi的磁盘空间,它的价值为Vi.我们希望从中选择一些软件安装到一台磁盘容量为M计算机上,使得这些软件的价值尽可能大(即Vi的和最大). 但是 ...

  9. POJ 1113--Wall(计算凸包)

    Wall Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 40363 Accepted: 13754 Description On ...

  10. ABAP术语-LUW (Logical Unit of Work)

    LUW (Logical Unit of Work) 原文:http://www.cnblogs.com/qiangsheng/archive/2008/03/04/1089637.html Logi ...