PHP学习_PHP技术_PHP网站建设_PHP程序员专注于PHP技术研究及学习

Adophper » 前端设计 » 解决CSS3 Media Queries兼容问题制作响应式页面

解决CSS3 Media Queries兼容问题制作响应式页面

此文被围观1201日期: 2016-01-10 分类 : 前端设计  标签:  ···

文章来源:http://www.bjishu.com/using-ie-css3htc-make-compatible-response-page


在“实现网站自适应的切实方法–实战总结”中我介绍了使用js和css实现响应式布局的具体实现方法,本文我详细介绍一下如何让低版本ie支持css3屏幕判断,并实现自适应布局的方法。

1、解决兼容性问题

  (1)页面最顶部必须定义:<!DOCTYPE html>

(2)点击:下载 respond.js 文件

(3)引入<script src="respond.js"></script>;respond.js必须在样式表之后引用

(4)页面必须在服务器环境中运行,直接打开用不了


2、使用css3判断窗口大小设置不同样式:

 

举个例子:

/*宽度小于500px时;背景为红色*/

@media screen and (max-width:500px){

body{background:red;}

}

 

/*宽度在500px-800px之间时候;背景为蓝色*/

@media screen and (min-width: 500px) and (max-width: 800px){

body{background:blue;}

}

 

/*宽度大于800px时;背景为绿色*/

@media screen and (min-width:800px){

body{background:green;}

}

 这里要注意,这里的样式必须是引用的外部样式,直接写在页面里的不可以





本站使用ThinkPHP框架开发读图网主题,目前托管在阿里云,图片由读图网提供. 蜀ICP备12031064号

Copyright © 2011-2017adophper.com All Rights Reserved.