移动网站布局麻烦答案

【问题标题】：mobile site layout trouble移动网站布局麻烦
【发布时间】：2013-06-10 19:11:01
【问题描述】：

我正在摆弄一个特定于移动设备的样式表，其中使用媒体查询，我正在使用一个名为“styles_mobile.css”的表格来添加特定于移动访问者的样式。

我希望有一种方法可以在移动访问者的情况下仅使用移动样式表，而不是在原始样式表之外使用 - 一个独立的样式表。

无论如何，由于我找不到没有代码的方法（我不会编码，只有少量客户端技能）我不得不摆弄移动布局。

似乎没有我尝试在移动样式表中更正的属性值，我无法设置样式以使内容仅适合屏幕宽度。某处有一条规则使我的移动 html 看起来比屏幕宽度的 100% 长，这可能是原始样式表中的一些内容。

如果有人碰巧能够使用移动设备查看该 URL，则该 URL 位于此处，该设备应使用“styles_mobile.css”表。我为所有元素添加了一个实线轮廓，因此问题可见：

http://tinyurl.com/7ywoqpf

在页面的顶部，显然有一个元素从主样式表的宽度或最小宽度属性值延伸屏幕。无论我多么努力地纠正这些我都不能:-(

有什么想法吗？

【问题讨论】：

标签： html layout mobile css media-queries

【解决方案1】：

看看你是否可以为每个样式表设置一个最小宽度，以防止它干扰低于你希望它工作的任何宽度。应该看起来像这样：

<link rel="stylesheet" type="text/css" media="only screen and (max-width: 810px) and (min-width: 721px)" href="tabstyle.css">

【讨论】：

【解决方案2】：

我们使用这种方法

<link rel="stylesheet" media="all" href="css/common.css">
<!--Responsive style sheets -->
<link rel="stylesheet" media="all and (min-width: 768px) and (max-width: 1407px)" href="css/tab-only.css">
<link rel="stylesheet" media="all and (min-width: 0px) and (max-width: 767px)" href="css/phone-only.css">

【讨论】：

谢谢，但我不确定那是什么？这是否使移动样式表独立？看起来不像