use*_*653 2 css internet-explorer responsive-design
我正在使用响应式网站.我已经使用媒体查询来做出负责任的事情.基本上,我没有使用任何固定宽度.我用百分比作为每个div的宽度.
因此,根据浏览器的大小调整,可以按比例缩放网站.对于使用宽度的百分比可能会导致较旧的问题.因为ie即9之前不支持媒体查询,所以,我想为那些构建不可扩展的版本即.由于我只提供了很少的代码来实现可伸缩性,所以如果我使用我的默认CSS在我的主样式表下/在任何地方编写CSS代码也可以吗？
喜欢style.css:
#info {
width: 13.672%;
/*if ie9 and lower
width: 175px;*/
height: 830px;
/*if ie9 and lower
margin-right: 40px;*/
margin-right: 3.125%;
float: left;
}
img {
margin: 0px;
padding: 0px;
border: 0px;
max-width: 100%;
/*if ie9 and lower
max-width: inherit*/
height: auto;
/*if ie9 and lower
height: inherit*/
}
我想写那种格式.但是,我不知道正确的格式.请告诉我正确的格式.
另一个问题给你.由于那些版本的ie不支持media-query,所以meta标签
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0" />
<link href="KT2012.css" rel="stylesheet" type="text/css" />
<link href="kt_large.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" media="only screen and (min-width:50px) and (max-width:500px)" href="kt_small.css" />
<link rel="stylesheet" type="text/css" media="only screen and (min-width:501px) and (max-width:800px)" href="kt_tablet.css" />
<link rel="stylesheet" type="text/css" media="only screen and (min-width:801px) and (max-width:1024px)" href="kt_medium.css" />
用tablet.css,mobile.css不要为那些旧版本创造任何问题,即不是吗？我的意思是我只想在我的主样式表(KT2012.css)中编写IE特殊的CSS .我应该写每一个IE特殊的CSS在每一个样式表像的mobile.css,tablet.css等等？如果设计的基于css文件不支持较旧的ie,那么,如果我为ie制作不可扩展的版本,我不会对基于设备/视口的样式表做任何事情,不是吗？
我推荐由Paul Irish在此概述的HTML5样板文件采用的方法.基本上,设置您的文档如下:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
您现在已经准备好了一些类来准确定位IE的某些版本.你的CSS会是这样的:
.element { margin-bottom: 20px; }
.lt-ie9 .element { margin-bottom: 10px; }
然后,您可以避免CSS攻击,并可以将所有内容保存在单个样式表中.
| 归档时间： |
|
| 查看次数： |
10531 次 |
| 最近记录： |