导航:首页 > 万维百科 > 响应式网页设计规范

响应式网页设计规范

发布时间:2020-08-24 16:38:09

1、什么是响应式网页设计与自适应网页设计

通俗的说,自适应网页设计也是响应式网页设计,响应式网页设计也是自适应网页设计。但是真正的细分起来,自适应只是响应式的一个子集,指网页中整体大图的自适应或者banner的自适应。


响应式网页设计优势:流体网格的网站适合响应式网页设计


1、灵活性强,可以适应不同分辨率的设备


2、方便快捷的解决多设备显示适应问题


自适应网页设计优势:固定断点的网站适合自适应网页设计


1、实施起来代价更低,测试更容易


2、自适应布局可以让设计更加可控,因为它只需要考虑几种状态就可以了


虽然响应式/自适应网页设计会带来兼容各种设备工作量大、代码累赘、加载时间长的缺点,但它们能“一次设计,普遍适用”,可以根据屏幕分辨率自适应以及自动缩放图片、自动调整布局,它们不只是技术的实现,更多的是对于设计的全新思维模式。

2、什么是响应式网页设计

响应式Web设计(Responsive Web design)的理念是:页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成,包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad,我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等,以适应不同设备;换句话说,页面应该有能力去自动响应用户的设备环境。响应式网页设计就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本。这样,我们就可以不必为不断到来的新设备做专门的版本设计和开发了。

3、响应式网站设计需要什么条件

1、网站美工的精细程度一个好的网站他的美工这块一定做的相当不错,因为我们的大部分客户看一个网站的时候基本上都是从他的美工这块来看的。一个好的网站,他网站的细节处理的一定很到位,包括产品的图片,文字的排版等等这些一定很到位的。
2、网站的兼容性这块我们能经常看到一些网站在ie浏览器下面看是正常的,但是换了个其他浏览器的时候就会变形的一塌糊涂那么这样的网站肯定算不上是什么好的网站。
3、从网站的定位来看网站设计的好坏,因为网站的定位清新才能获得更高的客户转化率,做网站之前一定要户再三确定好整体网站的定位,明确好建站的目的,只有这样才可以有一个核心的把握点,才能够围绕这个目的去设计,自然而然制作出来的网站就可以非常直观的展现在访客面前,访客也愿意看到这样的网站。
4、从整体结构把握网站建设制作的好坏,为什么这么说呢,因为网站结构制作的好不好意味着每一位访客是否能够通过浏览网站方便快捷的查找到自己想要看到的信息和内容。网站制作者为了实现这种效果,往往会采取这样的方式:网站不同的页面都有相对独立且带有有效关键词的标题,每个网页还有特别设计的META标签。
5、 从页面分割的角度来把握网站建设制作的好坏,页面分割常用于网站首页,即把整个页面合理的分成几个小块,这些小块之间会给人带来视觉上的差异,这样就能够使访客在看网站的时候一目了然。其实,也有人把网页设计中的这些有效分割当作是对页面内容的一种分类归纳。
6、从页面和谐的角度来把握网站建设制作的好坏,网站页面的和谐不仅体现在结构形式上,还得看作品所形成的视觉效果能否与人的视觉感受形成一种沟通,产生心灵的共鸣。这是设计能否成功的关键。
想要做好一个响应式网站,更多的是需要你耐心寻找问题,从而进行修改,在不断的调试和修改,你的网站才能变得更好。

4、响应式网页设计稿一屏多少像素

问的不太清楚,是网页的宽度像素,还是字体显示像素? 如果是网页宽度像素,现在比较流行的,1000像素宽度和1300宽度,还有一种就是响应式,自适应设备的宽度,字体大小的话,如果是以1000像素宽度为主的设计,字体12像素就OK了,如果是1300像素宽度的话,字体可以考虑为14像素,如果是响应式设计的话,字体的默认大小为14像素,然后设置成响应式,根据设备宽度大小自动变化。

5、自适应网页设计和响应式网页设计有什么区别

通俗的说,自适应网页设计也是响应式网页设计,响应式网页设计也是自适应网页设计。但是真正的细分起来,自适应只是响应式的一个子集,指网页中整体大图的自适应或者banner的自适应。

响应式设计可以一个网站兼容多个不同终端

响应式网页设计优势:流体网格的网站适合响应式网页设计。

1、灵活性强,可以适应不同分辨率的设备

2、方便快捷的解决多设备显示适应问题

自适应网页设计优势:固定断点的网站适合自适应网页设计。

1、实施起来代价更低,测试更容易

2、自适应布局可以让设计更加可控,因为它只需要考虑几种状态就可以了

虽然响应式/自适应网页设计会带来兼容各种设备工作量大、代码累赘、加载时间长的缺点,但它们能“一次设计,普遍适用”,可以根据屏幕分辨率自适应以及自动缩放图片、自动调整布局,它们不只是技术的实现,更多的是对于设计的全新思维模式。

6、什么是响应式web设计

响应式Web设计是在开发和设计网站过程中产生的一种方式,它的目的是让内容布局能随用户使用显示器的不同而变化。再明确点说,这种设计概念,就是让原本1292像素宽,4栏的内容,能够很好地显示在1025像素宽的用户屏幕上,同时还能自动简化成2栏。当然,让它很好的适应智能手机和其他种类电脑的屏幕也就成了水到渠成的事了。这种特殊的设计形式就被成为“响应式Web设计”。

响应式Web设计的优点:可以兼容所有尺寸的屏幕,随着手持设备(手机)屏幕尺寸繁多,也有很好的兼容性;而且开发一次,pc版和触屏版,手机版融合为一;

响应式Web设计的缺点:对前端工程师要求比较高,它的屏幕兼容要求前端工程师对各种浏览器差异性了解比较多,对于大数据展示的门户站点,如果用同一页面,即时浏览器不崩溃,在手机上一个页面,很难滑到最底部,带来操作是十分不方便的,触屏版和手机版对优质信息展示不足。

综合优缺点:响应式Web设计在企业站点,微型或者小站还是可以用的,对于大中型站点不合适(尤其大信息量展示的)。

7、响应式网站尺寸设计规范是什么?不要说大篇的介绍废话,落实到具体数据上

看来你是生手。网站没有统一的尺寸。也没有统一的设计规范。都是根据客服要求去设计的。
他要大点就大点,要小点就小点。而网上很多网站的字体也不是统一的。
既然是响应式。更不可能有固定的尺寸。只用%百分比。
安全尺寸?也没有统一的安全尺寸。有的是是全屏,有的是居中。宽度也没有统一的。各种宽度都有。

8、请问响应式网页设计PSD需要做多大的尺寸和多大的分辨率

PSD最好做1366*768的尺寸,网页顶部、底部、导航条部分需要百分百宽 内容根据PSD设定具体像素

9、响应式网页 界面设计 多大字号

响应式的网页设计,除了布局的变化以外,还有字号的改变。通常使用@media。比如:
h1 {
font-size: 48px;
}
@media (max-width: 767px){
h1 {
font-size: 36px;
}
}

以上的CSS可以让网页在设备屏幕尺寸小于768px的时候,让h1的字号从原始的48px变为36px。在实际的应用中,尤其是h1、h2、h3等等这样的大标题的字号设置,其实还是有一点点的瑕疵。因为可能需要额外多设定几个@media的宽度。
屏幕宽度从1280px、1024px、768px、640px、480px,直到320px,跨度非常大,为了保持比较完美的显示,通常会用Screen Size之类的浏览器插件,来显示不同宽度下布局的显示状况。h1 标签内,因为字号大,字数也或多或少,为保险起见,有时会为每一种屏幕宽度都定制一个合适的字号,这样稍显麻烦。
有一种解决的方案,用Viewport的方法。
%vw = %viewport width

我们用%vw来定义字号,也就是说用屏幕宽度的百分比来定义字号的大小。例如:
h1 {
font-size: 2.5vw;
}

这样一来,无论屏幕宽度如何变化,h1的字号会保持在Viewport宽度的2.5%的大小。

与响应式网页设计规范相关的知识