移动端是如何做适配的?

移动端的适配要分为三点来讨论:
使用viewport
媒体查询
动态rem方案

一、使用viewport

也就是使用<meta name='viewport>,用来让开发者控制视口尺寸以及比例。
一个典型的使用:<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

  • width属性:可以使用width=600来控制,或者设为device-width这一特殊值来指代比例为100%时屏幕宽度的CSS像素数值。或者设为device-width这一特殊值来指代比例为100%时屏幕宽度的CSS像素数值。(相应有height及device-height属性,可能对包含基于视口高度调整大小及位置的元素的页面有用。)
  • user-scalable=no:禁止缩放
  • initial-scale属性控制页面最初加载时的缩放等级
  • maximum-scale、minimum-scale及user-scalable属性控制允许用户以怎样的方式放大或缩小页面

二、媒体查询

使用媒体查询,一个媒体查询由一个可选的媒体类型和零个或多个使用媒体功能的限制了样式表范围的表达式组成,例如宽度、高度和颜色。
例:

<style>
        @media (max-width: 320px) {
            body{background: red;}
        }
        @media (min-width: 321px) and (max-width: 375px) {
            body{background: green;}
        }
        @media (min-width: 376px) and (max-width: 425px) {
            body{background: black;}
        }
        @media (min-width: 426px) and (max-width: 768px) {
            body{background: orange;}
        }
        @media (min-width: 769px){
            body{background: blue;}
        }
    </style>

三、动态rem方案

手机专用的自适应方案

什么是rem.

我们之前用到的px指像素,em指一个汉字的宽度,vh就是view height, 100vh==视口高度,vw就是view width, 100vw==视口宽度
那么什么是rem。(详细看mdn)
rem是 root em ,根元素的font-size。根元素是什么,就是html。实际上就是指html的font-size.

网页上的字体大小默认是16px;
但是如果chrome的最小字号是12px,那么不能设置为更小;

REM和EM的区别

两个就不是一个东西,REM是根元素的font-size,EM是自己的font-size。

手机端方案的特点

手机上无法做响应式的布局,那么如何解决呢?
1.百分比布局。难点在于高度很难写,因为宽度就不确定啊,比如宽高2:1,就没法写,写height: 20%根本不行。
看例子:http://js.jirengu.com/kohuh/1/edit
2.整体缩放
rem方案,解决宽度和高度没有关联的问题。
一切单位以宽度为基准,就能保证完美还原设计稿。
但是一切单位都与宽度没啥关系,vw有点关系,但是兼容性太差了。那么这里退而且其次,使用rem,我们知道rem是以html的font-size为基准的,那么我们用js操作,让其等于页面宽度就可以,这样rem就与page width有关系啦~这样操作:

<script>
    var pageWidth = window.innerWidth  
   document.write('<style>html{font-size:'+pageWidth+'px;}</style>')
</script>

http://js.jirengu.com/tatim/3/edit?html,css

可以让一个rem,等于页面宽度的1/10,方便书写。
当需要特别小的时候,或者字体的问题,直接使用px,因为最小就是1px,更小也没啥用了。

用的时候一定要注意,chrome最小字体为12的原则,因为屏幕一旦太小,可能font-size就小于12,就gg了

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,688评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,559评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,749评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,581评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,741评论 3 271
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,684评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,122评论 2 292
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,847评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,441评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,939评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,333评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,783评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,275评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,830评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,444评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,553评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,618评论 2 249

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,611评论 1 92
  • 前端进行移动端开发的时候,因为移动端的设备大小种类繁多,如果按照pc端的方式进行开发,则需要很繁琐,要写很多适配移...
    江湖竖子阅读 887评论 0 11
  • 刚开始做移动端web开发的同学应该都碰到过页面适配问题,为什么我在开发手机上调试好的页面在其他手机会有这样或那样的...
    留七七阅读 18,964评论 5 80
  • “英额布”为满语,汉文译为稠李子山下的慢弯。清初,当权者视长白山地带为清代发祥地之一,被封为禁地,设台兵把守。当时...
    帝国的精英阅读 3,274评论 0 0
  • 她咬下我手臂上的皮肉,血液在她口腔里跳动,她好像有些想呕吐,于是,她就在垃圾桶旁边呕吐起来了。 这只是她的...
    辛柚阅读 242评论 0 0