针对不同窗口/屏幕尺寸的响应式网页

Question

因此，我在TripAdvisor中遇到了web page顶级旅行目的地。如果您更改浏览器窗口大小，UI将优雅地更改以适应新的窗口大小。字体大小，元素的宽度，所有内容都相应地变化以适应wimdow大小。

任何人都可以告诉我如何去建立这些响应式网页？

我知道这个问题范围太广泛，但我只是想知道是否有任何框架构建这样的网页。

Answer 1

您需要使用@media规则根据页面的宽度更改您的内容。或者，您可以通过交换一些'px'测量结果并使用'％'测量来“变形”您的网站。

我建议你在做出现在的响应之前创建一个简单的响应式网站来练习。

您还需要添加元标记，以使内容在移动设备上具有合适的大小。

这通常是卓有成效的：

<meta name=viewport content="width=device-width, initial-scale=1"> 

帮助@media标签： http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

上查看端口信息： https://developers.google.com/speed/docs/insights/ConfigureViewport

Answer 2

您可以使用CSS媒体查询为不同的屏幕尺寸

@media (max-width: 1024px) {} 
@media (max-width: 768px) {} 
@media (max-width: 480px) {} 
@media (max-width: 320px) {}