rem設計方案

2021-10-07 00:01:25 字數 909 閱讀 7591

考慮問題 螢幕縮小是=時尺寸的問題:讓html的font-size是乙個動態值

var viewwidth = 750;

var pick = viewwidth / 100;

var mode = "resize";

function change()

document.getelementsbytagname("html")[0].style.fontsize =

view / pick + "px";

}window.addeventlistener(mode, change, !1);

window.document.addeventlistener("domcontentloaded", change, !1);

})(window, document);

1.設計時,以最大畫素為基礎 768px,那麼所有低於768的螢幕都適配

2.整體布局預設不設定寬度:預設100%

3:父元素一半不設定高度,有子元素撐起來

4.設定100%寬度

5.布局用flex 不用 width:100% float

6.文字大小用rem

在使用rem方案的時候,設計師設計盡量最大的頁面效果圖,例如720畫素的基本可以適應所有的移動端的裝置

整體布局預設是不設定寬度的,就直接讓它100%,鋪滿整個螢幕就ok了

小布局都是rem為單位的,大於720畫素的時候,沒有變化,但是一旦小於720畫素的時候,等比例的縮放,這點跟移動端不考慮放大,考慮縮小的原則是一致的

只設定width:100%,其餘不用設定,自適應盒子的大小

文字依然以rem為單位,等比例的放大,縮小

所有的布局均使用flex布局來用,不再使用width百分比,float布局了

Rem設計方案

作為font size的單位時,其代表父元素的字型大小,作為其他屬性單位時,代表自身字型大小 問題 1 chrom下有最小字型限制,必需為12px,所以這個值不能小於12 2 如果兩個一樣的元素,但是裡面字型不一樣,那就不能統一設定了。或者元素字型變化了,就又要統一設定一遍 css3新增的乙個相對單...

rem移動端設計方案

user scalable no 禁止使用者手指頭放大縮小 2.整體布局預設不設定寬度,預設100 自動填滿 3.父元素一般不設定高度,由子元素撐起來 4.移動端不考慮放大,考慮縮小 5.只設定width 100 其餘不用設定,自適應盒子的大小 6.文字依然以rem為單位,等比例的放大,縮小 htm...

TinyURL設計方案

現在貌似tinyurl很火爆,也逐漸成為一種流行趨勢。對應於php版本的tinyurl也有一些演算法,其實本質上來說是一種hash。除此之外,還有另外一種tinyurl方案 類似於http img.ly 其實這種設計 是最簡單的,沒有使用hash,而是遞增,這種的好 處就是資料庫 可以無限擴充套件,...