对前端设计思想的一丝感悟

学海无涯啊！学的东西越来越多就会发现自己的无知越来越多。就拿设计页面来说吧，或许你学学一些基本的html,css,和一些js就能写出一些很美观的页面了。但是前端设计的精髓远远不是会做一个两个页面。
其中作为前端工程师的一个瓶颈期就是设计出具有兼容性和适应各种设备的技能。我深深的感受到这一瓶颈的困难和知识储备的周期的长度。
怎么说呢？确实为自己所不懂得东西沮丧！就拿什么是像素分辨率来说吧！我感觉其缺乏的专业知识是远远不够的。对于各种移动端的设配配置信息以及如何设计出响应式的页面都是一项很具有挑战性的事。
突然感觉自己就是很业余的感觉。但沮丧归沮丧，我知道自己的薄弱以后就要加紧知识储备，我相信始终保持一个积极，好奇的心是很重要的。千万不要为自己掌握了一些小的技能而骄傲自满那会迷失自己。尽管尽快能赚到钱对我很重要，但永远不要以赚钱为驱动我学习技术的动力，我们要不忘初心。
好了下面来说一说我想了一下午的一些成果吧！不是一些具体技术，只是对前端思想的一些思考和对自身的反省。这让我认识到并不是什么都是很简单的。每个事物都有它内在存在的道理和奥秘。
1.如果按照1080px宽度设计页面
设w=屏像素宽1080px
基本参考单位d=w/16 =67.4px
我们称这个16为比例系数。
2.以d为基本单位设计网页元素宽高
这时在1080px宽度设备上可以正好完全显示

3.如果要自适应一个为980px宽的设备或者更大的屏幕设备，那么
宽高要等比缩放(除绝宽度不能改变的主布局元素外)
你想想当到一个宽度更大的设备上是不是要让高度更高一些才会使整体比例协调？
3.这时就要考虑自适应布局了，如果用css新增单位rem设置长度的话我就得考虑一下怎么确定单位值得大小了。
你想rem单位是根据根元素(html)字体大小来确定的即1rem=根元素字体的大小。
我们用js :document.documentelement.clientwidth获取设备宽度然后再除以这个比例系数d。这是我们要设置根元素的字体大小。
对应的rem单位大小就用原本设计的像素大小除以一个d就得到需要设计的宽高即(width/height px)/d rem
注意这个设计时用的比例系数和设置根元素字体大小除的数必须是一样的。
这时要理解好1rem单位长度就是整个页面宽除以比例系数16后的值。

别人给的设计图上面的大小是以像素为单位设计好了的样子，我们要做的就是在原本设计的设备上能正常显示还得适配其他的设备，这时候rem配合js是一种选择，也可以使用媒体查询来配合，当然也有其他的一些技术来搞定。
注意：
这时候到一个更大或者更小的设备上根元素的字体大小会动态的调整。这时候元素是以rem为单位的他们的宽高也会动态地调整达到总体比例上的协调。