@viewport / 博客 RSS 訂閱

Jul 19 2020

JoyZ - 移動端VW適配

移動端適配方案有很多種，都各有千秋，這裏我只介紹vw+rem適配方案 先簡單粗暴上方案： 1、設置meta meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" 2、UI設計稿尺寸 （1）375 html{ font-size:26.67vw } （2）750

Css , 移動端適配 , viewport

收藏 評論

Aug 19 2021

VaporSpace - 深究移動端適配那些坑：小數像素、圖片模糊

一、適配方案的利弊 縮放 最早是直接用 px 來寫，然後用 meta 標籤裏的 scale 來縮放整個頁面，簡單粗暴。好處是簡單快速，壞處是不能控制部分樣式的縮放，一些邊框之類的在小屏會變得很細。據説早期天貓首頁就是這麼幹的。其實之後所有適配方案都是這個原理，在編碼的時候以設計稿為標準，到手機顯示時則根據不同機型的顯示寬度而縮放，只是縮放的技術不同。 rem 1rem 等於 html 的 fo

Css , img , rem , viewport

收藏 評論

Aug 11 2020

我的名字豌豆 - 如何使用rem或viewport進行移動端適配?

 在開發移動端界面時，移動端適配一直是一個比較頭疼的事情，常見的移動端適配有viewport適配，rem適配，百分比適配等等，在這裏我們只介紹viewport適配和rem適配。看完這篇文章相信你應該會實戰操作移動端對於不同手機大小的適配問題了。 一：rem適配  rem是指相對於根元素的字體大小(font-size)的單位，根標籤的font-size=1rem。其可以稱作為相對單位，也就是説我們可

less , 移動端適配 , rem , viewport , 前端

收藏 評論

Sep 09 2020

前端子金 - 移動端適配知識點梳理-part one

1. 設備像素和css像素 設備像素，又叫物理像素（physical pixel），給出您正在使用的任何設備的形式分辨率，可通過screen.width/height獲取. css像素，又叫設備獨立像素（device-indenpendent pixel），此為邏輯像素，計算機設備中的一個點 注意：設備像素和css像素的關係（縮小還是放大針對的是css像素）： 100％縮

移動端適配 , viewport , 前端 , html5 , Javascript

收藏 評論