响应式网站设计尺寸规范（响应式布局一般要响应哪几个尺寸）

：暂无数据 2026-08-29 22:40:08 ：0

大家好，响应式网站设计尺寸规范相信很多的网友都不是很明白，包括响应式布局一般要响应哪几个尺寸也是一样，不过没有关系，接下来就来为大家分享关于响应式网站设计尺寸规范和响应式布局一般要响应哪几个尺寸的一些知识点，大家可以关注收藏，免得下次来找不到哦，下面我们开始吧！

本文目录

响应式布局一般要响应哪几个尺寸
响应式网页界面设计多大字号
请问响应式网页设计PSD需要做多大的尺寸和多大的分辨率
建设网站时，网页大小应该设置成多少
如何制作响应式网站

响应式布局一般要响应哪几个尺寸

响应式的网页就是能够只能地根据用户行为以及使用的设备环境进行相应的布局。我们通过响应式网站模板搭建站点，一般需要响应下面几个尺寸：

超小屏幕：（手机，小于768px）
小屏幕：（平板，大于等于768px）
中等屏幕：（桌面显示器，大于等于992px）
大屏幕：（大桌面显示器，大于等于1200px）

响应式的网页设计，除了布局的变化以外，还有字号的改变。通常使用@media。比如：
h1 {
font-size: 48px;
}
@media (max-width: 767px){
h1 {
font-size: 36px;
}
}
以上的CSS可以让网页在设备屏幕尺寸小于768px的时候，让h1的字号从原始的48px变为36px。在实际的应用中，尤其是h1、h3、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%的大小。

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

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

建设网站时，网页大小应该设置成多少

可以进行响应式设计。

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

技术思想：不仅要同比的缩放图片，还要在小设备上降低图片自身的分辨率。这个技术的实现需要使用几个相关文件，我们可以在Github上获取。包括一个JavaScript文件(rwd-images.js)，一个.htaccess文件，以及一些范例资源文件。大致的原理是，rwd-images.js会检测当前设备的屏幕分辨率，如果是大屏幕设备，则向页面head部分中添加BASE标记，并将后续的图片、脚本和样式表加载请求定向到一个虚拟路径"/rwd-router"。当这些请求到达服务器端，.htacces文件会决定这些请求所需要的是原始图片还是小尺寸的"响应式图片"，并进行相应的反馈输出。对于小屏幕的移动设备，原始尺寸的大图片永远不会被用到。