39,084
社区成员
发帖
与我相关
我的任务
分享请教一个CSS3的问题
在网上下载了一个国外的响应式模板，本来只会使用老的CSS制作一些简单的模板，都是一知半解还在不到，对于响应式更是一头雾水。下面请教几个问题，希望有高手赐教。
1、我在网上看到CSS3 利用的是@media screen，我下载过一些模板看到CSS里有 写@media screen 以及@media only screen开头的，，而我这个板子里的CSS是这样，如：@media (max-width: 480px)和@media (min-width: 768px) and (max-width: 979px)这样的了，直接一个@media ，是不是因为模板文件里<link href="css/ccs.css" rel="stylesheet">这样写样式才不加screen
这样符合标准吗？ 观察加了screen 是这样的<link rel="stylesheet" href="css/css.css" type="text/css" media="screen"/>
但是我如果也这样写，CSS的 @media后面加上screen，那么IE中显示正常，非IE宽屏就变成940px的了。
2、说是IE8以下不支持@media，我手上的模板表现为 在IE中打开网页不是宽屏，1170px,的变成940PX的。我用的的win8系统IE11的。后来网上查到方法，加一段名为 respond.js可解决，确实解决了，但打开网页会940PX变大到1170px，不是一下全面展现，如果网速慢加载JS慢，那么就会很明显，估计就是缺陷。有什么好的解决办法，，或者最新的技术已不存在这样的问题了，，因为我下的个模板 ，看了下最上面的标识，，是国外一个设计师设计的，时间为2012年，现在又过去了两年时间了。
3、我在CSS中加了
@media (min-width: 768px) and (max-width: 979px) {.products li {width:160px;} }
@media (min-width: 980px) and (max-width: 1024px) {.products li {width:155px;} }
理解为当768px--979px之间 li显示宽度为160px
980px--1024px之间 li显示宽度为155px
事实上显示不是严格按这个显示的.。当我模拟980--993px之间时，显示li的宽度还是为160px，，当994时才显示设置中的155PX，，不知到底是个什么情况。
问题有些多，先谢谢了
1、我在网上看到CSS3 利用的是@media screen，我下载过一些模板看到CSS里有 写@media screen 以及@media only screen开头的，，而我这个板子里的CSS是这样，如：@media (max-width: 480px)和@media (min-width: 768px) and (max-width: 979px)这样的了，直接一个@media ，是不是因为模板文件里<link href="css/ccs.css" rel="stylesheet">这样写样式才不加screen
这样符合标准吗？ 观察加了screen 是这样的<link rel="stylesheet" href="css/css.css" type="text/css" media="screen"/>
但是我如果也这样写，CSS的 @media后面加上screen，那么IE中显示正常，非IE宽屏就变成940px的了。
2、说是IE8以下不支持@media，我手上的模板表现为 在IE中打开网页不是宽屏，1170px,的变成940PX的。我用的的win8系统IE11的。后来网上查到方法，加一段名为 respond.js可解决，确实解决了，但打开网页会940PX变大到1170px，不是一下全面展现，如果网速慢加载JS慢，那么就会很明显，估计就是缺陷。有什么好的解决办法，，或者最新的技术已不存在这样的问题了，，因为我下的个模板 ，看了下最上面的标识，，是国外一个设计师设计的，时间为2012年，现在又过去了两年时间了。
3、我在CSS中加了
@media (min-width: 768px) and (max-width: 979px) {.products li {width:160px;} }
@media (min-width: 980px) and (max-width: 1024px) {.products li {width:155px;} }
理解为当768px--979px之间 li显示宽度为160px
980px--1024px之间 li显示宽度为155px
事实上显示不是严格按这个显示的.。当我模拟980--993px之间时，显示li的宽度还是为160px，，当994时才显示设置中的155PX，，不知到底是个什么情况。
问题有些多，先谢谢了
...全文
请发表友善的回复…
发表回复
cctv361 2014-12-11
- 打赏
- 举报
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="gb2312">
<title>标题</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!-- Le styles -->
<link href="/templets/default/css/bootstrap.css" rel="stylesheet">
<link href="/templets/default/css/bootstrap-responsive.css" rel="stylesheet">
<link rel="shortcut icon" href="/favicon.ico">
<script src="/templets/default/js/respond.js "></script>
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src=" /templets/default/js/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
</head><body>
业余草 2014-12-11
- 打赏
- 举报
你第三段的做法是可行的啊，为什么会
对了，你的doctype怎么写的？
如果你是自己加样式，得考虑选择器优先级，
在firebug中调试，看是哪段样式在起起作用，排查出来。
业余草 2014-12-11
- 打赏
- 举报
screen区别于print，如没必要就不加了吧。关于响应布局，你下载bootstrap.css看一下，它网格系统用百分比做单位。
cctv361 2014-12-10
- 打赏
- 举报
好的，等候
业余草 2014-12-10
- 打赏
- 举报
明天给你看看！！！
