photoshop宽度像素和网页宽度像素不一致的原因和解决办法

平常我们在使用PS完成的稿件的时候，有时会发现PS中设计稿与网页设计稿是不一样的，这种问题，该怎样解决呢？

这里感谢丁老师软件，原文链接在这：photoshop宽度像素和网页宽度像素不一致的原因和解决办法 - 丁老师软件开发工作室 (dls6.com)，感兴趣伙伴可以自行领取。

1、第一种可能是网页缩放不同步-网页缩放（100%），这里我们先改成100%，ctrl + 鼠标滑轮，就能够实现缩放了

1.1 这样还是不行，小编在PS中调整的画布是1920px，跟浏览器是一样的，再来

2、第二种解决方式更改桌面分辨率，桌面分辨率设置为了125%，这也就意味着，在浏览器中，开发者工具显示的是网页的css设置宽度，但是被放大了25%倍，所以显示宽度就变大了。

3、要解决这个问题，其实不难，photoshop的默认分辨率为72，我们根据公式得出：

解：

125%:72=100%:x

125x=100x72

125x=7200

x=7200/100

x=57.6

即，截图后把photoshop的分辨率设置为57.6即可

3.1 ps如何更改分辨率

1000px 100px，现在做了一个矩形

3.2 现在浏览器中的尺寸：1250px 120px,也就是浏览器的变形规则是由PS宽度1000px ----->1250 ，高度是100px -----》 120px，

3.3 我自己的解决的方法不断调整画布分辨率，直到使用IMG，比对的是1000px的矩形，100px的矩形，结果发现调整分辨率的图,一点用不管，还是1250px

4、或者直接在开发的过程中将桌面改为100%，这里不太建议，最好跟大家平面的平面设计的软件一样

5、直到看到大佬的文章问题才解决了，这里非常感谢大佬

Leon4055

6、IMG的媒体查询添加样式：

		@media (max-width: 1919px) and (min-width: 768px) {
			html {
				zoom: 80%;
			}

			@-ms-viewport {
				width: 1920px;
			}
		}

7、IMG.html完整写法：

<!doctype html>
<html lang="ja">

<head>
	<meta charset="UTF-8">
	<meta name="viewport"
		content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
	<meta name="format-detection" content="telephone=no">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="description" content="">
	<meta name="keywords" content="">
	<title></title>
	<style type="text/css">
		body {
			margin: 0;
			padding: 0;
			text-align: center;
			overflow-x: hidden;
			background-color: #000;
		}

		img {
			display: block;
			margin: 0 auto;
		}

		@media all and (min-width: 897px) {
			.spImg {
				display: none;
			}
		}

		@media (max-width: 1919px) and (min-width: 768px) {
			html {
				zoom: 80%;
			}

			@-ms-viewport {
				width: 1920px;
			}
		}

		@media all and (max-width: 896px) {
			body {
				margin: 0;
			}

			.spImg {
				width: 375px;
			}

			.spImg img {
				width: 100%;
			}

			.pcImg {
				display: none;
			}
		}
	</style>
</head>

<body>
	<div class="pcImg"><img src="../PS/index.Demo.png" alt=""></div>
	<div class="spImg"><img src="sp.png" alt=""></div>
</body>

</html>

编程之家

photoshop宽度像素和网页宽度像素不一致的原因和解决办法

1、第一种可能是网页缩放不同步-网页缩放（100%），这里我们先改成100%，ctrl + 鼠标滑轮，就能够实现缩放了

1.1 这样还是不行，小编在PS中调整的画布是1920px，跟浏览器是一样的，再来

2、第二种解决方式更改桌面分辨率，桌面分辨率设置为了125%，这也就意味着，在浏览器中，开发者工具显示的是网页的css设置宽度，但是被放大了25%倍，所以显示宽度就变大了。