重庆网站建设优质供应商

重庆设计公司：如何将任何站点转换为响应站点

发布时间2020-03-27    阅读：236    作者：重庆网站设计开发公司

我记得我们最大的担忧是如何在IE6中工作。有时候我觉得那时候要容易得多。现在，我们不仅要担心IE疯狂的东西(虽然现在更好了)，而且还有许多新的浏览器/操作系统组合，以及大量的屏幕大小。

我们不能否认移动设计的力量。事实上，研究表明，几年后，移动将取代桌面浏览。但是，你也不能活在未来，现在就需要结果。就像现在。

在这里，我们重庆设计公司将看到一些方法，以获得您目前的网站，并把它变成一个移动友好的一个，很少的努力。我们将看到CSS的基础知识，HTML优化，WordPress和jQuery插件以及其他你应该知道的很酷的东西。

那么，让我们摇滚吧！

这是什么反应，我为什么要关心呢？


重庆设计公司

照片：Yutaka Tsutano

响应设计是当您的网站自动适合用户的设备。因此，如果用户有一个小屏幕，元素将重新排列，首先显示主要内容。您将有更大的按钮，在元素之间有更多的空白，以避免意外激活，等等。

但我为什么要这么做？

首先，这比你想象的要容易得多。

有了这么多的工具，你所要做的就是了解创建优秀移动站点的基本知识。移动友好是非常容易的，你只需要了解一些设备，媒体查询，以及如何在布局上做一些小的改变。

第二，这是值得的(当你记住这些努力是多么的少时，它会变得更好)。

重庆设计公司

举个小例子，根据W3Counter的数据，苹果iOS从2011年到2012年增长了180%，而OSX几乎保持不变。因此，在几个月内，你实际上可以看到更多的移动浏览比桌面浏览(至少在苹果世界)。

同样的事情也会发生在其他设备上。所以，在不久的将来做好准备，迎接巨大的变化。

哦，坏消息是，如果你已经有了自己的网站，你就迟到了。这是因为最好的场景是你先为手机做事情，然后再做桌面版本。所以，当你开始你的下一个项目时，要更早地想一想，好吗？：)

有了这么好的工具、网格系统、库，就很容易提高您的转换率，并通过移动特定站点来取悦您的受众。但在讨论工具之前，我们需要了解基本知识、设备、浏览器、分辨率。好吧，让我们通过他们。

关键点

尽管工具，我们有3点，你必须知道时，为移动设备的设计。它们在这里：

操作系统和浏览器


我们主要有5种操作系统类型：

  • iOS-适用于iPhone、iPad、iTouches
  • Android-移动设备使用最多的操作系统，到处都是
  • 黑莓操作系统-你不会想惹这个家伙的，太可怕了
  • Symbian操作系统-主要是为诺基亚的人
  • WebOS-快死了，可怜的家伙
  • 很多，很多其他的…

只要看一下这个小列表，你就会明白为什么移动友好型网站比桌面网站更难做了，对吧？我的意思是，对于桌面，你主要有2个开放源码软件(没有Linux，我不会把你算在内)。好的，但是当我们考虑到浏览器和功能时，情况会变得更糟：

  • 旅行-最好的东西在外面。
  • AndroidWebkit--也不错，比Safari慢一点，但是工作得很好。
  • 多芬-我从没用过这个人，抱歉。但这是三星的浏览器，似乎运行得很好
  • 黑莓Webkit-黑莓最佳选择
  • 歌剧手机--我以前听说过这个家伙，它也很不错，而且有很大的进步
  • PalmWebkit-不太了解这个，但是它对标准的东西有很好的支持
  • 诺基亚Webkit-JS的性能并不是很好
  • 好吧，你明白我的意思了

所以，如果你想要一个很好的结果，就要准备好测试很多东西。但是，就像我们在桌面开发中所做的那样，你不能浪费大量的时间来处理浏览器问题，所以坚持使用前3，你就可以继续了。

屏幕尺寸


它们的范围从320×240到640×960，因此您不能仅仅设置用于桌面开发的绝对值。

此外，由于您已经有您的网站，您可以使用分析数据，以确定哪个是您的最佳最低值。

像素密度

这个很棘手。苹果公司推出了视网膜显示器，这意味着那里的像素要小得多。如果你想要一个真正好看的网站，特别是在图标和背景图片，你应该使用更大的图像为iOS。

css@media查询，使用起来比你想象的要容易得多

我必须承认，我很久以前就听说过媒体问题，虽然我是在去年才知道的。我想我只要一有可能就拖延，对吧？你不需要，我的朋友。这些媒体查询只是您在CSS中添加的简单规则，只针对规则中包含的设备。

这和编程差不多。看看下面的代码：

?
1
2
3
4
5
6
7
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
 body {
 background: red;
 }
}

只是说：
如果(这是一个屏幕设备)并且(屏幕宽度在320到480之间)，身体将有一个红色的背景

css-涓tics.com给了我们这个惊人的片段:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

你所要做的就是填补空白；)

要重新排列的元素


一旦你开始做一些事情，你就会注意到，这不仅仅是让网站成为一个列，而不是多个列。实际上，一些元素会占用您太多的空间，您需要删除它们。在这方面也有一些标准选项：

用下拉菜单替换菜单

你可以用这个关于CSS技巧的说明(真是太棒了，不是吗？)它依赖于媒体查询和JavaScript，但我最好将媒体查询部分替换为JavaScript代码，以确保菜单将使用禁用的JS。

隐藏边栏元素

您可以使用以下CSS处理不想使用侧栏的元素：

?
1
2
3
@media (max-width: 960px) {
 #sidebar .hideme { display: none; }
}

复位元件


此外，根据HTML的完成方式，您可能希望将内容切换到HTML的顶部，并将侧边栏移到底部，甚至在用户单击“Show”或类似的内容时使用JS来显示它。

“跳到”链接

重庆设计公司在代码中使用这样的内容是一种很好的做法，因此屏幕阅读器和移动用户可以跳过内容，而不是滚动大量内容(假设您首先拥有侧栏，或者是一个通用菜单)：

?
1
2
3
4
5
<ul id="skip-nav">
 <li><a href="#main">Jump to content</a></li>
 <li><a href="#search">Jump to search</a></li>
 <li><a href="#comments">Jump to comments</a></li>
</ul>


随机推荐
重庆设计公司：如何将任何站点转换为响应站点 重庆网络公司：设计精良的电子商务网站的9个特点 重庆web设计：AMP最终指南加速移动页面 重庆公司网站建设：确保设计项目成功的几个秘诀 重庆建网站：响应式导航的流行设计趋势
13306647218
QQ客服
胡经理