如何做好响应式网站的前端设计

↑↑↑点击上方中钰网络快速关注，随时查收最新信息人们对网站的需求越来越高，不仅仅要求有美观的网页，方便的浏览...



↑↑↑点击上方中钰网络快速关注，随时查收最新信息

人们对网站的需求越来越高，不仅仅要求有美观的网页，方便的浏览，不仅可以在电脑上浏览，还能在手机上观看，还要求网站可以随着自己的喜好进行变化，因此响应式网站便应运而生，但是在技术上也要做一些新的突破，那响应式网站的前端设计该如何做?接下来河南中钰给大家分享一些响应式网站的前段设计的经验。

第一、控制大小

习惯使用PC页面前端开发人员可能更喜欢使用电脑来控制大小，但在响应类型页面出现更多的是em和rem，使用它们来控制字体大小，甚至框体的大小的整体效果是非常明显的。

打个比方，我设置字体为20px、10px、30px三种不同的大小，在不同的地方自然字体网站将尺寸上的差异，这是不可避免的，如果一个页面足够复杂或文本的字体大小设置是足够多的，这也是一个非常大的工作量：不过在响应式页面中你设计完它们并不是完事，你用手机浏览网页会发现字体就会很大，甚至个别标题支持全屏幕手机，对移动终端用户体验的影响可想而知。所以你要开始写媒体调查发现一页有几十种字体需要设置不同的分辨率，如果把他们十一的调整，你可能需要写100字以上的CSS代码，但是如果你使用em和rem，那你的工作量大大减少，而且还确保字体统一比例。

关于em和rem的解释大家可以自己搜索，这个在线教程类是很多的，其实，他们，像素一样简单，当我开始时只花了几分钟就熟悉了。正如前面所提到的，你也可以用它们来控制框架的大小，然后根据页面的响应统一缩放，当然这就需要足够的计算量。还值得一提的是字体图标也可以用来控制，具体可以参考不同字体图标的官方文档。

第二、设置百分比

解决缩放问题的方法有很多种，最适合初学者是一个百分比的布局，在按键宽度设置百分比可以起到意想不到的效果：

我不推崇所有的都用百分比来布局，但有时可能大大减少工作量，给box1宽度设置100%后，它会自动填充整个浏览器的宽度，无论你是移动PC的分辨率是多少。它总是有很好的表现。这时你给box1下面的ul设置左右2%的margin也是如此，改变浏览器窗口的UL实际margin大小会随着改变，这样讲相信大家都能理解的百分比分布的概念。

有时，当然也不会有预期的效果，尤其是在较小的分辨率下，原本看似很好的设置的百分比似乎有些奇怪，因为响应时间最多的只是约定宽度，长度是由浏览器和文档决定的，这个时候要在终端上有很好的体验到媒体查询来解决问题。

以上就是关于响应式网站前端设计的两个非常重要的方面，把握好这两点是响应式网站设计的基础，除此之外，网站的框架以及CSS的媒体查询功能也是非常重要的前端设计工作，这可以让网站的访问更有延展性，总之，掌握关键的两点，就可以完成响应式网站的前端设计。

微信号长按有惊喜哟~



联系电话：0371-65523857联系地址：郑州市管城回族区紫荆山路8号阳光铭座A座2602室

    关注 中钰网络