HTML5 HTML5响应式网页设计

我正在关注Lynda.com YouTube上的其中一个视频以制作响应式设计网页。总之，我有2个CSS文件，一个用于标准全局风格，另一个用于较大尺寸的屏幕。HTML5 HTML5响应式网页设计

<!Doctype html> 
<html lang="en"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
    <meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale = 1.0"/> 
    <title> Lynda.com | Creating a Responsive Web Design</title> 
    <link rel="stylesheet" type="text/css" href="first.css" /> 
    <link rel="stylesheet" type="text/css" href="firstLarge.css" /> 
    <link rel="stylesheet" type="text/css" media="only screen and (min-width:50px) and (max-depth:500px)" href ="firstSmall.css" /> 
    <link rel="stylesheet" type="text/css" media="only screen and (min-width:501px) and (max-depth:800px)" href ="firstMedium.css" /> 
    <!--[if lt IE 9]> 
     <script src - src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
    <![endif]--> 
</head>

这是我的html文件的开始。所以我关心和困惑的部分是第二个链接rel行。当我扩展我的Chrome浏览器时，“firstLarge.css”中没有任何内容适用。就好像CSS甚至不存在。

我只是有点困惑，如何得到这个工作。任何类型的帮助将不胜感激。谢谢。

来源

2016-10-16 Henry Fok

没有看到这些文件包含什么，几乎不可能说什么。 – JJJ

...什么是最大深度？ – AA2992

@AnkithAmtange哎呀谢谢你的发现。它应该是宽度以及谢谢你！ –

-1

因此，对于响应式设计，您不需要1000张css工作表查找媒体查询。唯一需要多个样式表的时间是当我有一个允许用户覆盖网站的移动版本以查看桌面版本的按钮时。

只要在内容指示的时候进行媒体查询，当你缩小屏幕尺寸时，也可以使用大于1920px的大屏幕尺寸。

对不起，我会为你编码的例子，但只是在我的手机。

但愿虽然有帮助！

来源

2016-10-16 08:02:45 Allan

-1

如果您是UI开发人员的新手，我会建议您彻底学习CSS，您应该了解媒体断点。

请检查下面的链接，以供参考如何使用媒体查询。

https://responsivedesign.is/develop/browser-feature-support/media-queries-for-common-device-breakpoints

我建议标准断点如下使用。

@media only screen and (min-width: 0) and (max-width: 480px) { 
    /* css for mobile */ 
} 

@media only screen and (min-width: 481) and (max-width: 766px) { 
    /* css for tablet */ 
}

来源

2016-10-16 08:15:31 Devang

感谢所有的答案家伙。我最终解决了自己的问题。这可能是我昨天晚上很累的那种愚蠢的一种。这只是我在“firstLarge.css”中使用的类名在first.html中不匹配。

我在HTML中使用 <div class="informationContainer"> 和 “firstLarge.css” 之称 .information_container 。

谢谢你们！

来源

2016-10-16 15:38:45

HTML5 HTML5响应式网页设计

回答

相关问题