人们对网站的需求越来越高，不仅仅要求有美观的网页，方便的浏览，不仅可以在电脑上浏览，还能在手机上观看，还要求网站可以随着自己的喜好进行变化，因此响应式网站便应运而生，但是在技术上也要做一些新的突破，那响应式网站的前端设计该如何做?接下来给大家分享一些响应式网站的前段设计的经验。
　　第一、控制大小
　　习惯使用PC页面前端□□□开发人员□□可能更喜□□□欢使用电□□□脑来控制◈大小，但在响应□□□类型页面丨出现更多□□□□的是em和rem，使用它们□□□来控制字□□□□体大小，甚至框体□□的大小的□□□□整体效果•是非常明□□□□显的。
　　打个比方，我设置字体为20px、10px、30px三种不同的大小，在不同的地方自然字体网站将尺寸上的差异，这是不可避免的，如果一个页面足够复杂或文本的字体大小设置是足够多的，这也是一个非常大的工作量：不过在响应式页面中你设计完它们并不是完事，你用手机浏览网页会发现字体就会很大，甚至个别标题支持全屏幕手机，对移动终端用户体验的影响可想而知。所以你要开始写媒体调查发现一页有几十种字体需要设置不同的分辨率，如果把他们十一的调整，你可能需要写100字以上的CSS代码，但是如果你使用em和rem，那你的工作量大大减少，而且还确保字体统一比例。
　　关于em和rem的解释大□□□□家可以自□□□己搜索，这个在线□□教程类是◇很多的，其实，他们，像像素一□□□□样简单，当我开始□□□时只花了♦几分钟就□□熟悉了。正如前面□□所提到的，你也可以□□□□用它们来□□□控制框架□□□□的大小，然后根据□□□页面的响□□应统一缩❖放，当然这就□□□需要足够□□□的计算量。还值得一▽提的是字□□□□体图标也◆可以用来□□□控制，具体可以□□参考不同□□字体图标□□□□的官方文□□□□档。
　　第二、设置百分比
　　解决缩放△问题的方□□法有很多□□□种，最适合初□□□学者是一□□□□个百分比□□□□的布局，在按键宽□□□□度设置百◣分比可以□□□起到意想□□□□不到的效·果：
　　box1{ width:100%;}
　　ul{ margin:02%;}
　　我不推崇□□□□所有的都◆用百分比□□来布局，但有时可♦能大大减□□□少工作量，给box1宽度设置100%后，它会自动·填充整个□□□浏览器的□□□宽度，无论你是□□□移动PC的分辨率□□□□是多少。它总是有□□□□很好的表□□□□现。这时你给box1下面的ul设置左右2%的margin也是如此，改变浏览♦器窗口的UL实际margin大小会随☆着改变，这样讲相□□□信大家都•能理解的▼百分比分□□□□布的概念。
　　有时，当然也不□□会有预期▼的效果，尤其是在□□□□较小的分☆辨率下，原本看似□□□□很好的设□□置的百分□□□□比似乎有□□□些奇怪，因为响应□□时间最多◢的只是约□□□定宽度，长度是由□□□浏览器和□□□文档决定□□的，这个时候□□□要在终端□□上有很好□□的体验到□□□媒体查询□□□来解决问□□□□题。
以上就是□□关于响应·式网站前❖端设计的□□□□两个非常□□□□重要的方□□面，把握好这◉两点是响♦应式网站·设计的基□□□础，除此之外，网站的框◥架以及CSS的媒体查□□□询功能也○是非常重✦要的前端□□□□设计工作，这可以让●网站的访◈问更有延□□展性，总之，掌握关键□□□的两点，就可以完□□□成响应式◆网站的前丨端设计。