响应式网站是什么如何做好用户体验的响应式设计

响应式网站是什么如何才能做到真正“响应”

说白了，响应式网站其实就是那种能根据你用的设备屏幕大小自动调整页面布局的网页。就像弹性网格、流式布局，加上合适的图片处理，能让网页自动适配手机、平板、电脑各种屏幕，给你省了好多专门为不同设备开发网页的麻烦。这样一来，不管你用啥新玩意儿打开网页，页面都会漂漂亮亮地显示，不用担心内容跑版或者操作不方便。是不是很酷？

网页中怎么做响应式设计怎样写代码最靠谱用户体验又更好

其实做响应式网页通常有两种主要方法：

写一套响应式代码：利用百分比宽度、栅格系统、弹性布局和媒体查询这些技术，写一套代码适配所有屏幕尺寸。这方法挺节省时间、维护方便，但你得准备面对兼容性的一堆小问题，特别是各种不同设备的怪异表现，调试起来比较头疼。
写两套代码：分别针对PC端和移动端写不同版本的网页，再用JavaScript检测设备分辨率决定加载哪个。虽然代码多点，但可以更加针对性地优化用户体验，尤其在某些复杂交互或者页面结构方面更灵活。

此外，提升用户体验还得注意导航设计，不能太乱。比如多重导航（头部导航、侧边栏、页脚按钮）是个不错的选择，但别让所有导航都指向同一目标，否则会把用户绕晕。你们新网站建好后，建议好好做下测试，看看访问流程顺不顺，操作够不够顺滑。还有一个小技巧是用一些工具，比如Nicebox，可以帮你更轻松地搞定H5响应式网页制作。

想让某个div宽高等比例缩放？其实可以用媒体查询根据屏幕尺寸分别设置宽高，比如：

@media only screen and (min-width: 100px) and (max-width: 640px) {
  div {
    width: 100px;
    height: 100px; /* 保持1:1的比例 */
  }
}
@media only screen and (min-width: 641px) {
  div {
    width: 200px;
    height: 200px;
  }
}