实现网页布局的自适应 利用@media screen
利用@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的更多相关文章
- 利用@media screen实现网页布局的自适应
利用@media screen实现网页布局的自适应 优点:无需插件和手机主题,对移动设备友好,能够适应各种窗口大小.只需在CSS中添加@media screen属性,根据浏览器宽度判断并输出不同的长宽 ...
- [转载]利用@media screen实现网页布局的自适应,@media screen and
开始研究响应式web设计,CSS3 Media Queries是入门.Media Queries,其作用就是允许添加表达式用以确定媒体的环境情况,以此来应用不同的样式表.换句话说,其允许我们在不改变内 ...
- 利用@media screen实现网页布局的自适应,@media screen and
开始研究响应式web设计,CSS3 Media Queries是入门.Media Queries,其作用就是允许添加表达式用以确定媒体的环境情况,以此来应用不同的样式表.换句话说,其允许我们在不改变内 ...
- html自适应布局,@media screen,媒体查询
html自适应布局,@media screen,媒体查询 自适应代码示例: <!doctype html> <html> <head> <meta chars ...
- @media screen媒体查询实现页面自适应布局
@media screen and (min-width:1200px){ //大于等于1200px才会进入 } @media screen and (max-width:375px) { //小 ...
- media screen 响应式布局(知识点)
一.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网 ...
- 利用media query写响应式布局
最近才接触到响应式布局的概念,之前用到的bootstrap就是一种响应式布局的框架.学习的时候参考了http://blog.csdn.net/shoyer/article/details/829301 ...
- 利用css进行网页布局
网页布局: 又称版式布局,是网页UI设计师将有限的视觉元素进行有机的排列组合,将理性的思维个性的化的表现出来,是一种具有个人艺术特色的视觉传达方式.传达信息的同时有美感.网页设计特点(相对纸媒来说). ...
- @media screen页面自适应尺寸!!
@media screen and (max-width:360px){body,input,select{font-size:38%}} @media screen and (min-width:3 ...
随机推荐
- ASP.NET整体运行机制+asp.net请求管道+页面生命周期+MVC整体运行机制原理图
在网上找的,个人感觉很好的
- Android学习笔记_60_Android常用ADB命令
第一部分: 1. ubuntu下配置环境anroid变量: 在终端执行 sudo gedit /etc/profile 打开文本编辑器,在最后追加#set android environment 2. ...
- vim_preview_window
*29.2* The preview window When you edit code that contains a function call, you need to use the c ...
- js箭头函数
ES6标准新增了一种新的函数:Arrow Function(箭头函数). 为什么叫Arrow Function?因为它的定义用的就是一个箭头 x =>x*x 相当于: function(x) { ...
- TCP套接字
端口的概念 每个电脑一根网线,但是你挂着QQ的同时还可以浏览网页.两个不同应用的数据在同一根网线里是如何传输的呢?根据七层互联网模型,这个功能由运输层(TCP是运输层主要协议)实现.怎么实现呢,在网络 ...
- zepto 基础知识(5)
81.width width() 类型:number width(value) 类型:self width(function(index,oldWidth){....}) 类型:self 获取对象集合 ...
- js如何判断数据类型
1.最常见的判断方法:typeof console.log(typeof a) ------------> string console.log(typeof b) ------------&g ...
- [HAOI2010]软件安装(树形背包,tarjan缩点)
题目描述 现在我们的手头有N个软件,对于一个软件i,它要占用Wi的磁盘空间,它的价值为Vi.我们希望从中选择一些软件安装到一台磁盘容量为M计算机上,使得这些软件的价值尽可能大(即Vi的和最大). 但是 ...
- POJ 1113--Wall(计算凸包)
Wall Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 40363 Accepted: 13754 Description On ...
- ABAP术语-LUW (Logical Unit of Work)
LUW (Logical Unit of Work) 原文:http://www.cnblogs.com/qiangsheng/archive/2008/03/04/1089637.html Logi ...