响应式布局已经成为越来越时尚的前端开发技术，不要羡慕别人的跨屏网站时怎么做的，看完经验之谈，你也是一个跨屏的菜鸟！
工具/原料
1
Dreamweaver
2
ps
方法/步骤
1
当你准备学习响应式布局的时候，至少你以前会html静态布局了，所以，首页你要学会做一个简单的框架布局，div+css，布局完成以后就开始调整跨屏啦,首页头部的meta标签一定要添加，里面的参数对应的也是缩放、分辨率、宽度等元素，这个是必须要添加的！
2
头部标签添加好了，就进行第二步啦，这个也是实现跨屏的必备条件——“media”，这个标签是用来判断屏幕分辨率的（或大小），如果不知道大小你肯定不知道当前浏览网页的是什么样的设备，有了这个元素，是不是所有问题就立马解决啦，具体如果用可以查看css3的手册哦。到了这一步，你离跨屏就差一步啦
3
第三步就比较简单啦，所谓跨屏就是在不同的窗口下看到的页面都不会错位，看到这，你是否想到了？对，就是改用百分比、em等方式来进行布局，百分比布局是按照浏览器窗口大小的百分比，所以它会随窗口变化而变化，如果你到这一步就说明你已经基本掌握了响应式版的适配式的网站布局啦，接下来的才是实现真正的跨屏布局！
4
到这边你会觉得不需要media等标签都是可以跨屏是吧？那就错啦，跨屏还有一特点就是他不是内容的放大缩小，而是位置的调整，即布局的调整啦，所以接下来要做的就是利用media标签对设备进行判断，然后重新调整页面的内容位置，这个简单的另一个布局，你肯定会啦！最后你看看是不是和图片表现的一样啊，位置不同，大小可能不变哦，又美观！
5
恭喜你，完成你第一个响应式布局啦！！
注意事项
1
头部申明一定要添加meta
2
跨屏分辨率的分配要考虑清除
上一篇：漂亮女王养成记 如何规划职业方向
下一篇：比亚迪S6怎样升级系统