以前学网页设计时，大家都喜欢用定宽的设计。那时电脑显示器分辨率挺固定，像800,850,870,880这样的，设计师就根据这些尺寸去设计网页。比如说开源中国那个网页，宽度就是998像素特制的。那时候这么做挺好的，因为设备种类不多，分辨率也差不多，所以界面看起来差别不会很大。
现在科技进步了，特别是笔记本电脑和手机的普及，让传统的网页设计变得有些不合时宜。因为大家用的屏幕大小越来越多变，从大的台式机到小的手机都有，分辨率也是高低不齐。所以，网页设计得跟上这个变化，才能保证在各种设备上都好用。
固定宽度设计的局限性
固定宽度的网页在各种屏幕大小下经常让人头疼。用大屏小屏看网页，内容老是会露一截出来，还得拖着个横向滑块，用户感到很困扰。比如，用手机看网页时，固定宽度的网页总要你不停放大缩小，找内容就更费劲儿了。
百分比和响应式设计的兴起
以前，设计师只能用固定的宽度设计网站，结果遇到手机之类的小屏就犯愁了。后来他们发现能用比例来控制页面宽度，这样就能随着不同设备变宽或窄，适用面更广。刚开始这种方法确实有点用处，但还是有个问题就是手机上看起来东西太多太挤。
现在越来越多网站开始使用响应式设计了，就是让你不管用什么设备都能看得清楚、读得明白。这种设计不是只把页面随屏幕大小缩放而已，而是要重新排版和调整内容，比如缩小或隐藏导航栏、简化元素，让用户有更好的浏览体验。
CSSHack与统一用户体验
说到让电脑和手机用起来更像一回事儿，CSSHack可就得说说！比如QQ邮箱这个软件，不管你用啥浏览器，打开都是一样的界面。这就是因为腾讯的程序员们用了好多CSSHack来微调页面，保证了在各种浏览器和设备上都能看起来一模一样。
自适应与响应式的挑战
虽然理论上自适应和响应式设计可以解决多设备兼容性问题，但是现实应用里还是挺难搞定的。比如，想要搞出一个适用于大屏幕也能在小屏幕设备上显示得很完美的网站，你就得特别在布局、字号、图片大小这些小细节上下功夫。再者，怎么保证设计美感和功能不打折扣，同时还让各种设备运行起来顺畅？这都是搞设计的人要想清楚的事儿。
print?
Viewport与布局调整
说起响应式设计，Viewport这东西就得好好说说。Viewport简单来说就是网页的看图框，它规定了网页在各种设备上看起来多大，怎么样。如果你设置Viewport对了，网页就能自如地应对各种屏幕宽度，避免变得混乱不堪。比如说，你把`width=device-width`设好，网页的宽度就会自动变成设备的屏幕宽度，不管你用什么设备，都能看到舒服的页面布局！
print?
字体与元素大小的相对设置
在自适应设计里，尽量别用像素，要用相对值像em或者rem来控制字号和元素的大小。这样，当你的页面换个屏幕宽度看时，字号和元素就会自动调节，整个画面看着更和谐了。比如用rem的话，无论你是用什么设备，字体和元素都能保持合适的比例，让你看得更舒服。
print? width:xxx px; width:xxx px;
图片与视频的自适应
width: xx%; width: xx%;
除了摆好位置和写点字儿，图片和视频在网页设计里也不能掉链子。设计师得保证这些东西在各种设备上看起来都不赖，这就涉及到了图片的自动化调整和优化。比如说用CSS或JavaScript就能让图片在不同设备上自动变大小，或者选个合适的分辨率来应对不同的网速和设备性能。
print? width:auto; width:auto;
总结与展望
科技发展越来越快，网页设计也要跟上节奏。从原来的固定宽度，到现在的自适应和响应式，设计师们一直在找新方法，满足各种设备和用户的需求。虽然过程中有困难，但每次尝试都让我们离那个“一次设计，普遍适用”的目标更近了一些。
这个过程中学到的就是怎么用好技术改善设计，还有更明白用户体验有多重要。每次的设计变动都是对用户需求的理解和满足。以后，新的技术越来越多，网页设计肯定会变得更有意思。
print?
body {
font: normal 100% Helvetica, Arial, sans-serif;
}
body {
font: normal 100% Helvetica, Arial, sans-serif;
}
做网站设计的这活儿，可不只是一门职业，也是我天天都得学点新东西，搞点新鲜事的那种生活模式。每天想的就是怎么用我的设计给大家带来更多便利，过得更好。
print?
h1 {
font-size: 1.5em;
}
h1 {
font-size: 1.5em;
}
最后，跟你聊个事。身为用户的你，最欣赏哪款网页设计？是固定宽度型、适配型，还是响应式？你的看法和建议对我很重要，欢迎在评论区留言分享！别忘了给这篇文章点个赞，让更多朋友也来感受下网页设计的魅力！
print?
small {
font-size: 0.875em;
}
small {
font-size: 0.875em;
}
评论0