使固定宽度的网站移动友好
已发表: 2017-06-21最后更新于 2020 年 5 月 22 日
构建移动友好。 曾经有一段时间，作为平面设计师和 Web 开发人员，我最担心的是在 Internet Explorer 中创建 CSS 功能。 不仅 IE 仍然是个后顾之忧，现在我们不得不担心众多的屏幕尺寸和操作系统。
会有一段时间，移动端浏览会超过桌面浏览。 由于移动设备在我们的日常生活中变得如此突出，因此有时我们的网页设计师需要立即获得结果。 如果您是那些没有时间将静态网站转换为 WordPress 主题的设计师或程序员之一，一个移动友好的主题，我的朋友，您有希望。 在移动设备上查看您的所有内容时，您可以通过一些 CSS 和 HTML 优化来实现这一点。
http://www.smartinsights.com/wp-content/uploads/2017/03/Mobile-share-of-online-time-percent-2017.png
那！ 公司为世界各地的代理机构提供迷人而有效的网页设计服务。 详细了解我们的白标网页设计服务以及我们如何帮助您和您的客户创建或改善他们的网络形象。 今天就开始吧！
根据 comScore 的数据，在全球范围内，移动设备占在线时间的一半以上
移动友好或响应式网站能够自动配置网站的宽度，以适应查看者的设备。 水平滚动条是响应式设计中的禁忌。 如果您在移动设备上查看当前网站，并且在手机或平板电脑底部看到滚动条，则您的网站（或网站元素）可能不适合移动设备。 这些水平滚动条会破坏用户的体验，并且很可能会单击返回按钮。 人们习惯于在他们的设备上垂直滚动，因此当用户发现自己必须垂直和水平滚动才能查看内容时，他们会感到不舒服并离开网站。
从这一点开始，它是包罗万象的，设计网站对所有东西都有 CSS 类和 ID，我的意思是一切。
从页眉和菜单 div 到页脚中的 <p> 标签。 您需要根据屏幕宽度调整所有这些东西的大小。 当元素可以通过 CSS 定位时，移动、调整大小和缩放会容易得多。
CSS 媒体查询比你想象的更容易使用。
媒体查询第一次引起我的注意时，我认为它是编程语言的一部分，而不是 CSS 的一种形式。 当我发现它真正是什么时，我感到如释重负，从那以后我就一直在我所有的网络项目中使用它。
媒体查询基本上是 CSS 规则。 如果你的屏幕是这个宽度，那么只将这个 CSS 应用到这些元素上。 看看下面。
@media only screen and (min-width: 100px) and (max-width: 699px) {
身体{背景颜色：蓝色}
}
所以上面的代码只是说如果用户的屏幕宽度在 100px 到 699px 之间，那么将 body 的背景颜色更改为蓝色。 这就是标记站点中的每个 div 和 span 变得至关重要的地方。 通过适当的标记，为不同的屏幕宽度操作这些元素变得更加容易。
Css-tricks.com 列出了许多移动宽度供我们快速参考。
/* ———– Galaxy S5 ———– */
/* 纵向和横向 */
@媒体屏幕
和（设备宽度：360px）
和（设备高度：640px）
和 (-webkit-device-pixel-ratio: 3) {
/*****你的代码在这里*****/
}
/* ———– HTC One ———– */
/* 纵向和横向 */
@媒体屏幕
和（设备宽度：360px）
和（设备高度：640px）
和 (-webkit-device-pixel-ratio: 3) {
/*****你的代码在这里*****/
}
/* ———– iPhone 5 和 5S ———– */
/* 纵向和横向 */
@media 仅屏幕
和（最小设备宽度：320px）
和（最大设备宽度：568px）
和 (-webkit-min-device-pixel-ratio: 2) {
/*****你的代码在这里*****/
}
/* - - iPhone 6 - - */
/* 纵向和横向 */
@media 仅屏幕
和（最小设备宽度：375px）
和（最大设备宽度：667px）
和 (-webkit-min-device-pixel-ratio: 2) {
/*****你的代码在这里*****/
}
Galaxy、HTC 和 Apple 手机的媒体查询代码要多得多。 此外，还列出了 Ipad、Galaxy 和 Nexus 平板电脑的宽度。 您所要做的就是将此代码输入到您网站的 CSS 文件中，并用您自己的代码填写空白 CSS 括号！ 完毕！
您的网站响应迅速，但仍然感觉不太对劲
您可能会开始注意到您网站上的某些元素在移动设备上占用了相当多的空间，例如您的主菜单。 为了使其具有响应性，您很可能在菜单中的 <li> 标签上应用了“float: none”。 但是现在菜单在您的网站顶部占据了很大一部分空间。 您需要使用 jQuery 和 CSS 媒体查询将主菜单转换为下拉菜单。 Css-tricks.com 也解释了如何做到这一点。
您也可能认为某些元素无关紧要，可以在桌面和移动设备上找到。 . 您可以使用 CSS 摆脱它们：
#main-content .sidebar img {显示：无}
}
这些网站调整倾向于使网站变得非常长，吸引用户大量滚动。 这就是锚文本（对于有视力的用户）或跳过链接（对于屏幕阅读器）成为您朋友的地方。
锚文本是一个可点击的链接，允许用户跳转到网页的某个部分，而无需滚动。 对于移动友好型网站来说，这是一种方便的方法。 下面的代码是锚文本链接的示例。
<a href="#skip">点击此处跳至主要内容</a>
<a id="skip"></a>主要内容从这里开始
跳过链接主要用于屏幕阅读器，允许残障用户绕过或跳过重复的 Web 内容，如菜单导航，并直接访问他们感兴趣的信息。
如果跳过链接的 CSS 规则为“display:none”，屏幕阅读器将变为“无法访问”。 因此，解决此问题的一种方法是将链接放置在屏幕外，这样屏幕阅读器仍然可以识别您的链接，并允许他们跳过您的新移动网站。
.跳过链接{
位置：绝对！重要；
顶部：-9999px！重要；
左：-9999px！重要；
}
因此，这是将您的固定宽度网站转换为移动友好网站的快速简便方法。 另外，不要忘记将所有图片设置为“width: 100%; 高度：自动。” 任何以像素为单位设置宽度的图像、div 或 span 都将创建到移动设备上的水平滚动条，因此请记住为使用媒体查询的不同设备将它们设置为百分比或不同宽度。
这可能有点耗时，但相信我，一旦你学会了它，你就会永远使用它。 您将在您将要做的每个网站上使用此方法，因为即使是最新的 WordPress 或 Joomla 响应式主题和模板也需要进行一些修改才能使它们看起来像您想要的那样。 随着移动设备市场的不断变化，尤其如此。
这可能有点耗时，但相信我，一旦你学会了它，你就会永远使用它。 点击推文-Izzak Hale，高级平面设计师