鍍金池/ 問答/HTML5  HTML/ 求思路，pc端網(wǎng)頁怎么設(shè)計才能在移動端比較友好顯示？

求思路，pc端網(wǎng)頁怎么設(shè)計才能在移動端比較友好顯示？

網(wǎng)站做好了，但是需要適配到移動端，如果只考慮寬度的話還是比較好做的，可以通過 media來判定屏幕大小，做一些相應(yīng)的css調(diào)整，但是現(xiàn)在首頁有一些廣告語，所以在屏幕大小變化時，字體大小需要相應(yīng)的放大或縮小，并且由于首頁有動畫，所以字體的上下位置也需要做相應(yīng)調(diào)整，該怎么設(shè)計呢？
感覺屏幕寬度變窄，平滑的改變宣傳語字體大小和位置不好做，沒有思路。
圖片描述

回答
編輯回答
風(fēng)清揚

求思路，pc端網(wǎng)頁怎么設(shè)計才能在移動端比較友好顯示？

反過，移動端的頁面在 PC 端怎么有比較好的顯示，就好辦了。

PC 端的頁面，如果涉及交互，幾乎不可能在移動端有好的表現(xiàn)的。（只是內(nèi)容布局的話，用 js 控制一下怎么也做得到了）

2018年7月31日 08:09
編輯回答
情未了

"可以通過 media來判定屏幕大小，做一些相應(yīng)的css調(diào)整"

just do it

2017年10月29日 06:51
編輯回答
孤巷

1.對手機端強制viewport;

<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />

2.自適應(yīng)的字體轉(zhuǎn)換成rem;
//既然按照media的話,接下來就簡單了,按照media去按寬顯示內(nèi)容.

2018年2月6日 10:49
編輯回答
心癌

樓上說了，media，just do it.不過如果工程量大，并且效果沒想象中好的話，建議還是再做個移動版的。

2017年7月21日 14:11
編輯回答
野橘

給樓主介紹一個神奇的單位：vw和vh，對字體也適用哦，兼容性在移動端也還可以。
可以和媒體查詢配合使用，PC端還是你目前的設(shè)計方式，而移動端使用vw,vh來確定尺寸。

 比如  width:80vw; height: 15vw; font-size: 10vw;
 這樣高度寬度和字體大小都會依據(jù)當(dāng)前Viewport的寬度的來決定，從而保持一定的比例不會變形。
 用rem的方法也是可以的，但是相當(dāng)不直觀，考慮這倆貨在移動端的兼容性差距不大的情況，還是用vw/vh好。
2018年3月22日 05:20