网页设计合适的页面尺寸是多少

Posted 2023-04-17

网页设计选用的分辨率是72像素，使用的画布尺寸1920px*1080px。但是并不意味着在整个画布上进行设计，一般采用全屏展示和两侧留白的方式。
全屏展示，是整个网站看起来大气一些，但是布局要合理安排，不然看起来有些傻大的感觉。
两侧留白是为了适配不同电脑屏幕的尺寸，能够确保网站只是电脑站的时候一些笔记本电脑也能显示全面网站的内容区域，内容限时区域在好控制在1000px-1200px。 参考技术A

其实也没有硬性规定，但是为了兼容大多数浏览器一般是设置960px，随着现在浏览器分辨率的变化，已开始向着1000px,1200px宽度发展，例如淘宝(1000px）京东商城（1200px）。

如果需要兼容不同浏览器尺寸，现在比较流行的做法是做成响应式的，即根据不同分辨率显示不同的尺寸，工作量也就随之增加了。貌似国内的大网站也没有使用。

网页设计的工具

网页设计软件： FrontPage（简单易用，且高度符合IE浏览器支持设计）；DreamWave（功能强大，设计成品支持众多浏览器）。

图像处理软件：Photoshop 或Fireworks ；动画制作：Flash MX 。

知识储备：基本网页常识；html知识（很简单，早期只用此制作网页，用记事本即可编辑，用浏览器打开后呈现网页内容）；CSS知识（级联样式表（Cascading Style Sheet）简称“CSS”，通常又称为“风格样式表（Style Sheet）”，它是用来进行网页风格设计的。通过设立样式表，可以统一地控制HTML中各标志的显示属性。

参考技术B 网页设计合适尺寸，已经有了很大改变，不需要担心设备尺寸不同的问题，以目前主流形式来看，有以下：

1、pc端网页的设计稿尺寸是宽度1920px，高度最小是1080px , 主体内容在1200px内就行，比较规范。

2、移动端网页的设计尺寸可以考虑680px和720px 参考技术C 800×600下,网页宽度保持在778以内,就不会出现水平滚动条,高度则视版面和内容决定。
2.
1024×768下,网页宽度保持在1002以内,如果满框显示的话,高度是612之间,就不会出现水平滚动条和垂直滚动条。
3.
在ps里面做网页可以在800×600状态下显示全屏,页面的下方又不会出现滑动条,尺寸为7...
4.
在PS里做的图到了网上就不一样了,颜色等等方面,因为web上面只用到256web安全色,... 参考技术D 一品威客表示：
其实也没有硬性规定，但是为了兼容大多数浏览器一般是设置960px，随着现在浏览器分辨率的变化，已开始向着1000px,1200px宽度发展，例如淘宝(1000px）京东商城（1200px）。
如果需要兼容不同浏览器尺寸，现在比较流行的做法是做成响应式的，即根据不同分辨率显示不同的尺寸，工作量也就随之增加了。貌似国内的大网站也没有使用。
网页设计的工具
网页设计软件： FrontPage（简单易用，且高度符合IE浏览器支持设计）；DreamWave（功能强大，设计成品支持众多浏览器）。
图像处理软件：Photoshop 或Fireworks ；动画制作：Flash MX 。
知识储备：基本网页常识；HTML知识（很简单，早期只用此制作网页，用记事本即可编辑，用浏览器打开后呈现网页内容）；CSS知识（级联样式表（Cascading Style Sheet）简称“CSS”，通常又称为“风格样式表（Style Sheet）”，它是用来进行网页风格设计的。通过设立样式表，可以统一地控制HTML中各标志的显示属性。

iOS资产大小及设计方法

【中文标题】iOS资产大小及设计方法

【英文标题】：iOS asset sizes and design method

【发布时间】：2016-09-28 01:36:15

【问题描述】：

编写了我的第一个 iOS 2D 游戏的代码。现在，当谈到资产时，我感到迷茫。一个原因是由于过时的文章而感到不完美。 我需要知道图像尺寸，才能开始设计。游戏的设备方向仅为纵向。状态栏被隐藏（游戏）。这些设备是通用的，主要是 iPhone，但如果 iPad 的尺寸也很合适，我当然不反对。为此目的开始设计的最佳图片尺寸是多少？

如果没有您的帮助，我会开始创建 1242 x 2208 和 401ppi 的背景（全屏）图像。然后，在 Photoshop 中将最终图像缩小到 750 x 1334 (4,7“) 和 640 x 1136 (4“)。我的方法对吗？特别是，最好从 1242 x 2208 开始还是 1080 x 1920 好？

【问题讨论】：

我将缩小最终图像，创建为 1242 x 2208 和 401ppi。所以它是相同的图像，不会因屏幕尺寸而异。但我也不知道是否需要缩小或只是将1242 x 2208的图像添加到@3x部分并让iOS重新调整它？

【参考方案1】：

iPhone 5： 显示尺寸： 4 英寸屏幕尺寸： 320 x 568 点渲染像素： 640 x 1136 (@2x)每英寸像素 (PPI)： 326浏览器尺寸纵向： 320 x 460 像素（320 x 528* / 320 x 548**）

iPhone 6/7： 显示尺寸： 4.7 英寸屏幕尺寸： 375 x 667 点渲染像素： 750 x 1334 (@2x)每英寸像素 (PPI)： 326纵向浏览器尺寸： 375 x 559 像素（375 x 627* / 375 x 647**）

iPhone 6/7 Plus： 显示尺寸： 5.5 英寸屏幕尺寸： 414 x 736 点渲染像素： 1242 x 2208 (@3x)每英寸像素 (PPI)： 401浏览器尺寸纵向： 414 x 628 像素（414 x 696* / 414 x 716**）

所以我会选择图像的渲染像素大小。

【讨论】：

作为一个快速而肮脏的备忘单，也请看这里：iosres.com（如所说，快速而肮脏，只有在你想通了并且确定你知道大体方向后才依赖它）跨度>

2 天了，这个答案不被接受？这有点不公平，真的没什么好说的......@rashwan-l 应该得到赏金（不是他需要代表:)）

Rashwan L 已经回答了，但您也可以参考here。

我的问题的标题是“iOS 资产大小和设计方法”，您只回答了资产大小......一个很容易用谷歌搜索的信息。您会选择渲染像素，那么我应该创建一个 1242x2208 图像并将其缩小到 750x1334 和 640x1136 吗？如果是的话，这三幅图像是否被复制到通用图像集中？