有很多到这个问题.在它的最基本的，是的，如果你设置特定的像素尺寸到一个元素，那么这将显示为相同数量的像素在不同的设备上，但可能不同的物理尺寸由于不同的像素密度.
在CSS（用于样式化网页的语言）中，存在诸如%、em和vw/vh/vmin/vmax之类的相对于某物的其它单元，并且这些单元使得开发者能够以对于改变屏幕大小而言灵活得多的方式来布置元素。
最后还有@media-query's，它允许开发者根据屏幕大小提供不同的尺寸。例如，你可能希望一个元素在小屏幕上占据屏幕的整个宽度，但是在大屏幕上只占据屏幕的一部分。
有关详细信息，请参阅w3schools，特别是css units和responsive design

是的，网页正在针对多种设备进行优化。有许多技术可以使用，你一定要继续学习它们。这些知识不仅对编码人员至关重要，对平面设计师也很有用。
你经常可以看到使用CSS Media Queries或source srcset in the context of an img tag的页面。一个典型的例子是在https://www.apple.com/-〉inspect the page source来查看发生了什么。有很多关于这个问题的好文章，比如@CSS Tricks。

PX是一个固定的大小。意思是，一个元素在电脑上的高度和在平板电脑上的高度一样。它不会调整大小。使用%，em，vw，或者其他的，它们是可以调整大小的，并且它们会根据屏幕大小进行调整。你可以在运行程序的时候通过调整窗口大小来测试。

阅读响应式网页设计https://www.w3schools.com/html/html_responsive.asp。
您可以使用各种配置（如设置
viewport
这将设置页面的视区，该视区将向浏览器给予有关如何控制页面尺寸和缩放比例的说明。
Using the width Property

• Width：<img src="answer.jpg" style="width:100%;">-设置width属性允许图像在需要时放大和缩小。但是有一点需要注意的是，使用width属性时，图像可以放大到比原始大小更大。因此，可以使用max-width
• 最大宽度：<img src="img_girl.jpg" style="max-width:100%;height:auto;">

如果max-width属性设置为100%，则图像将在必要时缩小，但绝不会放大到大于其原始大小。
Responsive Text Size
您可以使用"vw" unit，它代表视口宽度，这意味着文本将与浏览器窗口匹配。
Media Queries
始终可以为不同的浏览器大小定义完全不同的样式。

@media (max-width:800px) {
  .left, .main, .right {
    width:100%; /*The width is 100%, when the viewport is 800px or smaller*/
  }
}

Frameworks
很多框架已经为你做好了这一点，为了避免从头开始，你可以使用它们，一个例子是Semantic UI，大多数框架已经遵循了最佳实践，所以使用它们会很棒，而且大多数框架是社区驱动的。