粉阿吉整理(9)之------移动端的布局与适配

最新推荐文章于 2023-04-18 02:08:02 发布

阿星始于现在

最新推荐文章于 2023-04-18 02:08:02 发布

阅读量247

点赞数

分类专栏：入门-基础文章标签：前端 html5 html css

本文链接：https://blog.csdn.net/qq_38188709/article/details/104094601

版权

入门-基础专栏收录该内容

18 篇文章 1 订阅

订阅专栏

移动端的布局与适配

1. 啥是媒体查询？

媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。

1.使用媒体查询可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。 
2.可让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式。
3.媒体查询中可用于检测的媒体特性有 width 、 height 和 color （等）。

媒体查询写在CSS样式代码的最后，CSS是层叠样式表，在同一特殊性下，靠后的的样式会重叠前面的样式。

@media 设备类型 and (设备特征){ 
                         div{ width:300px; height:300px;}
                        	}

2. CSS3的媒体查询模块？`@media`

CSS 2.1支持9种媒体类型——注意:媒体类型名区分大小写

braille              ——触觉反馈设备                                 
embossed             ——盲文印刷设备 
handheld             ——小型或手持设备                                       
print                ——打印机
projection           ——投影图像，如幻灯                                 
screen               ——计算机显示器 
speech               ——语音合成器                                               
tty                  ——打字机 
tv                   ——电视类                                                     
all                  ——所有

3. 响应式网站设计

响应式网站设计(Responsive Web design)的理念是：集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相对应的布局。根据不同的终端加载不同的css样式，否则是写不出来响应式效果的。

4. 为什么响应式设计需要媒体查询?

如果没有CSS3的媒体查询模块，就不能针对设备特性（如视口宽度）设置特定的CSS样式。

5. 怎样使用media？

首先需要在html文档中添加以下代码，用来兼容移动设备的显示效果

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

     width=device-width: 宽度等于当前设备的宽度      
     initial-scale=1：   初始的缩放比例（默认为1）       
     maximum-scale=1：   允许用户缩放到的最大比例（默认为1）         
     minimum-scale=1.0   允许用户缩放到的最小比例（默认为1）      
     user-scalable=no：  用户不能手动缩放

用媒体查询写响应式，那么怎样在CSS文件中写CSS响应式媒体查询例:

@media screen and (max-width:970px) and (min-width:750px){
             body{ 
                   background-color:red;
             }     
     }
@media screen and (max-width:750px){
             body{
                    background-color:blue;
             }
     }

图示：
在这里插入图片描述

6. 响应式设计？

响应式布局

假如我们需要兼容不同屏幕分辨率、清晰度以及屏幕定向方式竖屏(portrait)、横屏(landscape)，怎样才能做到让一种设计方案满足所有情况？

我们的布局应该是一种弹性的栅格布局，不同尺寸下弹性适应。

响应式设计优缺点

优点：
1）：面对不同分辨率设备灵活性强
2）：能够快捷解决多设备显示适应问题
缺点：
1）：兼容各种设备工作量大，效率低下
2）：代码累赘，会出现隐藏无用的元素，加载时间加长

7. 移动端meta标签设置

1.HTML5页面窗口自动调整到设备宽度并禁止用户缩放页面
<meta name="viewport" content="width=device-width, initial-scale=1.0， minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

2.忽略将页面中的数字识别为电话号码
iPhone会将看起来像电话号码的数字添加电话连接，应当关闭<meta name="format-detection" content="telephone=no" />

3.忽略Android平台中对邮箱地址的识别
<meta name="format-detection" content=“email=no" />

4.通过快捷方式打开时全屏显示
<meta name="apple-mobile-web-app-capable" content="yes" /> 

5.隐藏状态栏 
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

8. 怎么区分普通屏和高清屏?

通过dPR 计算区分普通屏和高清屏，dpi、ppi 屏幕像素密度。
在这里插入图片描述

9. em和rem区别?

em是参考父元素的font-size
rem是参考html（根元素）的font-size

不用 rem 的话，切换移动端的时候高度宽度会固定，用了rem，高宽会跟着变化而变化。

10. 移动端适配

先引入下面的meta标签

/*引入*/
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no" /> 
<meta name="format-detection" content="email=no" /> 
<meta name="apple-mobile-web-app-capable" content="yes" /> 
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

11.适配布局

11.1. rem布局

rem是参考html（根元素）的font-size ，引入下面的代码，量出来的元素除以100加百分号就是rem，直接用rem。

//引入
<script> 
    window.onload = function(){     
        var html = document.querySelector("html");        
        html.style.fontSize = html.offsetWidth / 750 * 100 + "px";         
            addEventListener("resize",function(){                  
                    html.style.fontSize = html.offsetWidth / 750 * 100 + "px";         
        },false); 
} 
 </script>

11.2. vw布局

vw、vh是一种视窗单位，也是相对单位。
vw可以跟着视窗宽度自动跟着调整
缺点：得算。
高 宽 都可以用vw，vh。

vw：视窗宽度的百分比（1vw 代表视窗的宽度为 1%）
vh：视窗高度的百分比
在这里插入图片描述
vw、vh 与 % 百分比的区别:
（1）% 是相对于父元素的大小设定的比率，vw、vh 是视窗大小决定的。
（2）vw、vh 优势在于能够直接获取高度，而用 % 在没有设置 body 高度的情况下，是无法正确获得可视区域的高度的，所以这是挺不错的优势。

11.3. vw+rem布局

rem布局必须引入js才可以使用
vw布局得计算每次的视窗宽度，过程中计算vw

那么第三种布局：rem和vw的优势加在一起 根元素用vw 过程中用rem

在这里插入图片描述

12. 淘宝出的适配的

flexible.js 
<meta content="yes" name="apple-mobile-web-app-capable"> 
<meta content="yes" name="apple-touch-fullscreen"> 
<meta content="telephone=no,email=no" name="format-detection"> 
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script> https://github.com/amfe/article/issues/17