实现网页布局的自适应 利用@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 ...
随机推荐
- lucene&solr学习——索引维护
1.索引库的维护 索引库删除 (1) 全删除 第一步:先对文档进行分析 public IndexWriter getIndexWriter() throws Exception { // 第一步:创建 ...
- 火狐 SSL 收到了一个弱临时 Diffie-Hellman 密钥
火狐 SSL 收到了一个弱临时 Diffie-Hellman 密钥 最近在用FireFox 调试时使用Https,连接 https网址 时发生错误. 在服务器密钥交换握手信息中 SSL 收到了一个 ...
- ProjectOnline同步数据到线下
根据微软官方文档 我们能将office365上的应用系统projectonline数据同步到线下. 我们看看projectonline上面的数据: 同步后到达sqlserver的数据 这样office ...
- Restframework框架总结及restful规范
1. django rest framework框架的作用? 帮助开发者可以快速开发出遵循restful规范的API 2. django rest framework框架都有哪些组件(10)? -版本 ...
- Spring知识点总结(三)之Spring DI
1. IOC(DI) - 控制反转(依赖注入) 所谓的IOC称之为控制反转,简单来说就是将对象的创建的权利及对象的生命周期的管理过程交由Spring框架来处理,从此在开发过程中不再需要关注对象的创建和 ...
- oracle 完整性约束的禁用启用以及对表的影响,表的修改和复制
primary key ----表的唯一性约束,不能为空,且不能有重复值 foreign key ----俩表之间的约束,启用之时,在删除数据时需要先删除父表数据,再删除子表数据 禁用方式为:alte ...
- 使用actionerror做失败登录验证
一. 登录页面中放置如下代码: <h4>员工登录</h4> <div style="color:red"> <s:actionerror/ ...
- 精干货! Java 后端程序员 1 年工作经验总结
一.引言 毕业已经一年有余,这一年里特别感谢技术管理人员的器重,以及同事的帮忙,学到了不少 东西.这一年里走过一些弯路,也碰到一些难题,也受到过做为一名开发却经常为系统维护 和发布当救火队员的苦恼 ...
- Apache Maven(三):POM
什么是 POM? POM (Project Object Model) 项目对象模型.它是一个XML文件,其中包含有关Maven用于构建项目的项目和配置细节的信息.它包含大多数项目的默认值.例如,构建 ...
- MySQL数据操作(DML)
表结构准备: mysql> CREATE TABLE student( -> sid INT PRIMARY KEY AUTO_INCREMENT, ), -> age INT, ) ...