响应式页面设计什么是响应式布局设计

响应式网页 界面设计 多大字号

响应式的网页设计，除了布局的变化以外，还有字号的改变。

通常使用@media。

比如： h1 { font-size: 48px; } @media (max-width: 767px){ h1 { font-size: 36px; } } 以上的CSS可以让网页在设备屏幕尺寸小于768px的时候，让h1的字号从原始的48px变为36px。

在实际的应用中，尤其是h1、h2、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%的大小。

HTML响应式布局

响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。

这个概念是为解决移动互联网浏览而诞生的。

响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用大势所趋来形容也不为过。

随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式

什么是响应式布局设计

简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。

这个概念是为解决移动互联网浏览而诞生的。

也就是说，不管你是pc端还是移动端（包括手机和平板等小分辨率的），他都能够根据你的不同的分辨率做出调整，即响应，完整的很好的把效果显示出来。

优点是面对不同分辨率设备灵活性强；能够快捷解决多设备显示适应问题。

如果你在PC端调试会发现，他会随着你窗口的分辨率的变化而变化。

目前比较常用的框架是bootstrap。

。

。