em rem寫手機頁面的一種寫法 1

2022-05-06 01:39:11 字數 1241 閱讀 6096

(這幾天接觸了不少前端,才知道自己才是不折不扣的「異教徒」,自適應也不是我理解的那樣的,於是把文章標題改了下,內容是沒改的,但也不能說我錯了,只能說這是一種實現的方法吧。。2016/3/28)

關於自適應,這個稱呼還是在前端q群裡聽來的,我不是很確定它的概念。他們(q群上某些人)說它(和那個響應式)表示布局會自動適應手機。

其實你html稍微好一點會發現這個其實不是很難,你只需把你的div寫成寬度百分比。

當然還有幾個必要的部分:

<

meta

content

="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"

name

="viewport"

>

2、高度、字型大小。

我相信這才是大多數人覺得寫自適應比較麻煩的地方,畢竟寬度可以寫成百分比可是高度跑不了,字型大小也一樣。

rem/em正是解決這個問題的一種方法。我們先看一下另一種比較笨的方法。

@media screen and (max-width: 320px) }

@media screen and (min-width: 320px) and (max-width: 640px) }

@media screen and (min-width: 640px) }

用上面的css,再隨便建乙個div,你會發現div的高度會根據頁面大小變化。其實語句很簡單,光看也能猜出來是什麼意思了。這不禁讓我們想到,可以再細分一些,寫到每一畫素,那麼高度問題,文字大小問題(只需把height換成font-size)不就迎刃而解了麼。不過也絕沒有乙個程式設計師會這麼做,除非。。呵呵

我們可以用js來做這件事情,先是獲取頁面寬度,然後再根據頁面寬度計算出height的值再賦予div。好像很難?其實不會。

比如div我想它在640px的螢幕上顯示是100px的高,並等比例縮放。那麼在320px的螢幕上它就應該是50px高。因為640剛好是320的2倍,那麼高度與螢幕寬的關係就是:

高度 = (螢幕寬/640)*100px

換成js就是:

var w =window.innerwidth;

var d = document.getelementbyid('aa');  //這裡aa是div的id

d.style.height = (w/640)*100+'px';

寫手機頁面的準備工作

這篇可能與你想要找的東西更接近一些 手機端html頁面製作需要了解的東西集合 首先頁面中單位不再是用 px來寫,而是em。其次,medioadaption.css是需要的,這裡是乙個例子 media screen and min width 1080px media screen and min w...

weakself的一種寫法

前言在不久前看afnetworking的原始碼時候發現了這麼一句 不知道這行 的使用場景的同學你該去自習看看arc的注意事項和block的使用了 afnetworking的寫法 weak typeof self weakself self 我之前一直這麼寫的 weak typeof self wea...

Makefile的一種通用寫法

管理linux環境下的c c 大型專案,如果有乙個智慧型的build system會起到事半功倍的效果,本文描述linux環境下大型工程專案子目錄makefile的一種通用寫法,使用該方法,當該子目錄內的檔案有增刪時無需對makefile進行改動,可以說相當的智慧型。下面先貼 為減小篇幅,一些非關鍵...