什么是响应式网页设计?

2019-03-25 09:06|来源: 网路

1.1 世界变得移动化

现在能够上网、浏览网页的设备的种类太多了,2007年iPhone发布,改变了世界互联网的格局,移动端的流量即将赶超PC流量。

1手机硬件变得强了。你的手机运算能力相当于阿波罗登月的时候NASA所有计算机运算能力的总和。

2手机的网速变得更快。现在wifi遍地都有,3G、4G时代已经来临。很多年前GPRS技术已经比较落后,网速很慢。

3手机中的网站的用户体验变得更好了。 手机中有一些能够退拽、滑动的轮播图等等效果。

1.2 响应式网页设计应运而生

前端开发工程师的工作,面临着挑战——我们要保证我们设计制作的页面,在各种不同的尺寸的设备上同样美观。

用手机访问www.sina.com.cn(和PC网址是一样的),但是看到的确是手机版的界面。

没有做好手机访问网站的准备,页面特别像在3000米高空俯瞰整个页面。

做好用户可能用手机访问你的网站的准备。

这样的用户体验还没有做到极致,同样是用PC访问,台式机屏幕尺寸有小有大。


大屏幕PC上,优酷提供了1190px的版心



中小屏幕PC上,优酷提供了970px版心



大屏


中屏


中小



淘宝、优酷、携程网已经开始了响应式网页的设计。Responsive Web Design,追求的就是根据用户设备的不同、用户设备屏幕大小的不同、用户设备朝向的不同,提供不同的网页设计,达到都美观的效果。

做出这样的响应式的网站,会给你的网站的用户体验带来质的提升。


本文来源于网络


相关问答

更多

响应式网页设计的边界(Borders With Responsive Web Design)

使用border-box来box-sizing : * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } 原因是,默认情况下,所有的box-model都是content-box ,因此border使width变大2px 。 你可以在这里看到原因: http://www.binvisions.com/ ...

如何实现响应式网页设计及其最佳实践[已关闭](How to implement responsive web design and its best practices [closed])

使用媒体查询将针对不同的屏幕尺寸调整不同的CSS。 它的工作方式是告诉浏览器:如果screenwidth = 700px或更小/更大; 使用手机的CSS。 如果screenwidth = 1000px或更小/更大; 使用桌面css。 您可以使用多少媒体查询没有限制。 使用百分比也是一种可能性; 流体设计 。 尽管如此,我还是建议将它与媒体查询一起使用。 至于框架,那里有很多。 Bootstrap是更受欢迎的游戏之一。 我个人认为, 首先使用手机是最好的方式。 但是,关于这个问题仍然有激烈的争论。 ...

不集中响应式网页设计(Not centered responsive webdesign)

我不确定这是否也是您的问题的答案,但是也许您可以发布测试用例? 如果它是一个移动设备(iPhone ex。),那么您可以尝试添加以下代码片段: <meta name="viewport" content="width=device-width; initial-scale=1.0"> 另外,我建议您使用100%的宽度,然后添加2到6%的宽度(取决于您关注的宽度)。 这是一个非常有用的响应式设计链接(和一个很好的演示): http : //webdesignerwall.com/tutorials ...

响应式网页设计,它是如何工作的?(Responsive web design, how does it work? [closed])

有几种方法可以解决这个问题: 你可以使用用户代理测试(这是当你使用lime modernizer或php来测试用户代理时。然后你会使用PHP if语句或类似的东西为不同的设备加载不同的内容 你可以为每个设备使用相同的内容,只是改变它看起来使用CSS媒体查询的方式(这就是我使用的),你可以看到它在应用程序我的构建名为LeadRocket app.myleadrocket.com创建一个帐户和缩小屏幕尺寸 干杯 PS这是一个很好的媒体查询锅炉板,它是我用来建立www.myleadrocket.com的 ...

用于响应式网页设计的jQuery(jQuery for responsive web design)

尝试将公共代码放在函数中,然后绑定事件,并调用函数: $(document).ready(function() { // Optimisation: store the references outside the event handler: var $window = $(window); function checkWidth() { var windowsize = $window.width(); if (windowsize ...

响应式网页设计 - Bootsrap(Responsive web design - Bootstrap)

您需要学习使用引导网格系统。 Bootstrap不会使其自行响应。 看看这些链接: https://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp https://v4-alpha.getbootstrap.com/layout/responsive-utilities/ You need to learn to use the bootstrap grid system. Bootstrap does not make it respon ...

响应式网页设计中的ckEditor(ckEditor in responsive web design)

对于响应式图像,请使用: CKEDITOR.addCss('.cke_editable img { max-width: 100% !important; height: auto !important; }'); 如果要在浏览器调整大小时修改工具栏,则不能在不破坏实例的情况下执行此操作并使用其他工具栏配置重新创建(内容不会丢失)。 为此,您可以使用window.matchMedia (在Firefox,Chrome和IE 10中支持),如下所示: var toolbar_basic = [ ...

响应式网页设计,增加电话分辨率(Responsive web design with increasing phone resolutions)

CSS的'px'是一个抽象单元,可根据不同的设备进行调整。 带有视网膜显示屏的手机仍然可以有480px的断点。 这并不意味着它是480个物理像素。 CSS's 'px' is an abstract unit which will adjust according to different devices. Phone with retina display can still have breakpoint of 480px. It does not mean it is 480 physica ...

响应式网页 - 高度设计(Responsive web pages - designing for height)

如果您使用的是操纵SVG的库(Raphael所做的那样),您不一定要使用百分比。 相反,您可以将SVG“canvas”元素的大小设置为您想要的任何大小。 为了让你的游戏占据100%的空间,你可以把所有的图形放到一个g元素中 ,使用Raphael(或jQuery或类似的,如果Raphael不能)获得SVG元素的大小(如果它不知道)由于某种原因),然后根据该高度缩放/平移该g元素,使其填满屏幕。 这样,你不需要考虑百分比! You don't necessarily have to use perce ...

为什么在响应式网页设计中使用HTML5?(Why use HTML5 in a responsive web design? [closed])

媒体查询在CSS3中添加。 支持CSS3的浏览器倾向于支持HTML5的合理部分,因此它们倾向于一起但它们在技术上并不依赖于彼此。 如果你想使用媒体查询,然后在所有元素上使用id和class属性来确定它们如何调整大小(或消失),你可以自由地使用正确的语义,这使得大多数人的样式更容易。 除了造型之外,还有其他好处。 适当的语义标记可以帮助屏幕阅读器。 Media queries were added in CSS3. Browsers that support CSS3 tend to support ...