0

我正在构建可以包含文本、图片、视频、facebook 等按钮的 html 页面。我正在使用 CKeditor 创建页面。我将该 html 存储在数据库中，然后为 Web 和移动应用程序访问它。

它适用于网络，但不适用于应用程序。有时视频、图片、宽度、高度等问题和应用程序的质量也不好。如果我为移动应用程序解决问题，那么网络就会受到干扰。HTML5 支持移动环境，但我怎样才能为所有环境获取一个 html？

我不想为所有环境创建单独的 html，我想创建一个 html，它应该适用于所有环境。任何人都可以提出一些最佳解决方案吗？

4

3 回答 3

2

您需要使用媒体查询，查看端口标签

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px){
      /* iPads  ----------- */
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
      /* smartphones**/
}

元标记到标题

<meta name="viewport" content="width=100%; initial-scale=1; maximum-scale=1; minimum-scale=1; user-scalable=no;"/>

在高度/宽度、字体中使用百分比您还需要了解 Java 中 web 视图的 UI 属性，例如边距、填充等。

于 2013-10-25T11:07:13.647 回答
1

您可以按照@Smokescreen 的建议使用CSS3 媒体查询。

您可以直接在样式表中使用它们，并以与正常方式相同的方式将样式表包含在页面上，但还可以通过向标签添加media属性。link

<link rel="stylesheet" media="screen and (max-width: 480px)" href="mobile.css" />

或者使用内联 CSS：

@media screen and (max-device-width: 480px) {
  .button {
    background: #000;
  }
}

不过，要让您的网站在所有设备上看起来都很完美，还需要一些时间。我建议考虑是否值得花这么多时间修改您的网站以使其在移动设备上看起来不错等。例如，当您知道目标受众（老年人）几乎不会时，为什么还要费心调整有关养老院的网站曾经在移动设备上访问您的网站。您还没有具体说明您的网站是关于什么的，所以这取决于您自己进行研究并做出决定。

另一种选择是重新设计您的网站并使用Bootstrap。这个选项可能看起来有点过头了，但你会惊讶于你可以多快地使用完全响应的引导程序构建外观漂亮的网站。

于 2013-10-25T11:05:24.850 回答
0

您是否可以添加任何 CSS 以根据打开页面的设备的屏幕尺寸对其进行不同的样式设置。

例如，为自己制作一个 CSS 样式表，然后使用媒体查询来定义不同的样式以用于不同大小的浏览器窗口。然后在 ckeditor 的“源”代码视图中为您的 html 文本分配不同的 id 或类，以便它们从样式表中获取样式以用于不同的屏幕尺寸。

这样，您可以说类似 - 对于 1024 像素或更高的屏幕分辨率，将文本设置为 25 像素等，对于 600 像素或以下的屏幕，将文本设置为 12 像素等。您还可以使用此方法重新配置您的布局不同的画面。

于 2013-10-25T10:55:43.383 回答