常见问题5 移动端

1，常见的移动端布局解决方案有哪些？原理如何？

1:固定布局 采用固定像素 原理:设置好视口,跟PC端写法一样 版心320px 即可

优点：思路沿用pc端，上手简单。

缺点: 界面左右两侧有空白 而且元素略小 用户体验差

2:流式布局 原理:采用%替代固定px 限制布局盒子的最大宽度和最小宽度

优点:实现自适应

缺点: 只做宽度适配,高度会被拉伸

3:rem布局 原理:设置根标签html的字体大小,利用媒体查询换算不同屏幕宽度下对应的字体大小 利用相对单位rem取代固定px

优点: 宽高字体大小都能自适应 显示效果好

4:媒体查询布局 原理:利用媒体查询查询不同的屏幕宽度 给每个不同设备都写一套样式文件

缺点:复杂 工作量大 后期难维护

2，简述rem布局原理？

设置根标签html的字体大小,利用媒体查询换算不同屏幕宽度下对应的字体大小 利用相对单位rem取代固定px

优点: 盒子宽高大小都能自适应 ,可以达到自适应的需求

缺点:字体大小如果也设置rem单位的话会出现字体变化呈现线性的变大变小 ,其实字体的变化应该是非线性的取值 所以字体需要单独利用媒体查询设置

3，常见的移动端布局方案有哪些 ？具体原理是什么？

1，固定布局

在head里吧viewport加好，跟pc端一样，设想整个网页宽度为320px居中即可，超出部分留白

优：思路沿用pc端，上手简单

缺：大屏手机手机横屏时，两边留白较大，而且大屏手机看起来页面会特别小，操作按钮也很小，用户体验差

2，流式布局

使用百分比来代替传统的px，但高度用培训固定，显示效果会感觉被拉长，高度没变

优：很好解决自适应需求

缺：通过大量百分比布局，会出现兼容性问题，且更适用于对横向拉伸的设计元素，存在局限性

3，响应式做法

根据用户的访问设备的主要类型做三四种布局

每种布局有一个区间可利用媒体查询，可以为不同分辨率的设备加载不同的样式

优：相对精确的控制显示效果

缺：对同一类书写不同的样式导致代码比较繁复，后期维护困难

4，rem布局

设置根标签html的字体大小,利用媒体查询换算不同屏幕宽度下对应的字体大小 利用相对单位rem取代固定px

4，单行文本溢出和多行文本溢出怎么实现？

①、单行文本溢出显示省略号(…)

text-overflow:elli[ps] is属性来实现单行文本的溢出显示省略号(…)。当然部分浏览器还需要加宽度width属性。

 p{
 width：200px；    // 固定宽度
 overflow: hidden;    //溢出隐藏
 white-space: nowrap; //文本不换行
 text-overflow: ellipsis; //文本溢出显示省略号
 }

②、多行文本溢出显示省略号(…)

设置相对定位的容器高度（高度必须是行高的整数倍），用包含省略号(…)的伪元素元素通过绝对定位模拟实现

 p{
 width：200px；    // 固定宽度
 overflow: hidden;    //溢出隐藏
 text-overflow: ellipsis; //文本溢出显示省略号
 display:-webkit-box;  //将对象作为弹性伸缩盒模型显示
 -webkit-line-clamp:2;  //限制块元素显示的文本行数
 -webkit-box-orient:vertical; //设置伸缩盒对象的子元素的排列方式
 }