我目前在Intranet站点上实现响应设计。我基于min-width和max-width媒体属性在主页上添加了普通链接。它像魅力一样工作,但它没有在我尝试使用CSSRegistration时。出于一些未知原因,CSSRegistration没有媒体属性(我知道)。有没有一种方法可以使用CSSRegistration而不是普通的HTML链接克服这个问题?

<!-- Responsive CSS-files based on width -->
<link type="text/css" rel="stylesheet" media="only screen and (min-width: 801px)" href="/Style%20Library/css/ResponsiveMaster.css" />
<link type="text/css" rel="stylesheet" media="only screen and (min-width: 401px) and (max-width: 800px)" href="/Style%20Library/css/ResponsiveMasterPad.css" />
<link type="text/css" rel="stylesheet" media="only screen and (max-width: 400px)" href="/Style%20Library/css/ResponsiveMasterMobile.css" />
.

如果我尝试,我得到了一个众所周知的屏幕:

有帮助吗?

解决方案

As you say, there is no media attribute.

There are a couple of ways I can think of to handle this in SharePoint:

  • Either use Device Channels to target different master pages to different devices
  • Or, add all of your responsive CSS to one file, containing the @media wrappers. This will also be better since if you for example resize your browser window, you get the appropriate css as you go.
  • A third way that comes to mind is using a combination of @media and @import tags in one CSS-file, loading in specific files with the @import into the @media attribute
许可以下: CC-BY-SA归因
scroll top