Meta标签的重要性
说说meta标签，这东西挺管用的呢! meta标签可以告诉浏览器如何调整网页大小，为各种设备提供更好体验。比如，假如你在viewport标签上设定了值，那浏览器就能直接把设备宽度当视窗宽，屏幕显示效果立马就能变得恰当。不过要提醒大家，IE8及更早版本的浏览器不支持媒体查询功能，这时候你就得借助media-queries.js或respond.js这类小工具来解决问题咯。
HTML结构的布局
好，咱们来聊聊怎么搭建HTML！网站主要由头、正文区、侧边栏和底四大部分组成。比如，头框高度为180px，位置不变；正文区适中宽度为600px；侧边栏稍窄一点，300px即可。这样，掌握了HTML结构，我们就能轻松打造出适应不同设备的页面了。
Media Queries的运用
说到CSS3媒体查询功能，这可是响应式设计的好帮手！你可以用它像写条件判断那样根据屏幕大小来改变网页显示。比如，设置当你的浏览器窗口小于或等于980像素宽的时候，某个规则就能起作用了。平时，我更喜欢用比例替代像素，这样才能实现真正的流动布局~
流式布局 vs 固定布局
说白了流式布局和固定布局就是灵活性与稳定的战争！流式布局可以随着手机大小缩放全屏，但有时候会显得有点儿乱哦；而固定布局倒是稳定得很，只是换个设备的话，美感方面可能会差那么点儿。要怎么选？看看哪种方法让网页看上去舒服就行。
图片与媒体文件处理
做出响应式设计时，你得考虑下那些大图小图在手机和电脑上能不能看清啦、快慢怎样？别担心，用了srcset属性或者media query就好，因为它们可以根据屏幕大小自动替换上清晰又快速的图片~
字体与排版技巧
咱们做设计时，字体可别小瞧了。屏幕那么多，字号得看着舒服、清晰才行，太大或太小的字体会不好看。要搞定它，用em和rem这些小技巧设定字体大小，这样就不用担心缩放到哪出现乱七八糟。同时，排版和段落里，行距啊、段间距什么的可得仔细看看，这样读者读起来才能舒心畅快！
导航栏与交互设计
移动端做界面交互要注意，导航栏的大小和位置都很重要，特别是用那些小屏手机的人。试着用折叠菜单或者页面滑动手势来解决这个问题，这样大家操作起来就爽多了。另外，别忘了把按钮做得醒目一点，操作区也要加大，让用户能方便地玩转你的网站！
多设备兼容性测试
下面来聊聊如何测试跨设备兼容性。做好了响应式设计以后，记得去看看你们的网站或者app在各种手机和平板还有笔记本电脑能不能顺利运行~可以用模拟器或者真的试一下，看到有什么不对的话就立马修正。
评论0