對前端設計思想的一絲感悟

學海無涯啊！學的東西越來越多就會發現自己的無知越來越多。就拿設計頁面來說吧，或許你學學一些基本的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為單位的他們的寬高也會動態地調整達到總體比例上的協調。