What:移动端需要得到与PC端一样优秀的体验
Why:移动端屏幕宽度与分辨率变化将对原有PC端页面中的对象的展示造成影响。
How:响应式 OR 自适应
1. 移动端静态展示特点
- 分辨率较低意味着可承载像素总量降低
- 屏幕尺寸降低导致浏览器窗口变小影响页面布局
- 手机屏幕规格太多
由此带来的问题是：
- 问题1：迷你的屏幕如何能看电脑屏幕中显示良好的网页
- 问题2：布局的问题如何解决，还要兼顾成本。
2. 常见解决思路
2.1 布局问题解决
2.1.1 同一套DOM结构
媒体查询：一套HTML+(一定条件下生效)多套CSS。
简评：致命问题——宽度变化对页面布局影响太大。结果：复杂页面不适合这套方案，简单页面（新闻，博客）可以。
2.1.2 不同DOM结构
检测用户设备，根据用户设备来返回不同的HTML文件。
简评：简单，分工做，不干扰。
2.1.3 页面对象大小与页面宽度相关
px这种尺寸只包含了具体对象自身的大小信息，并未于其他对象和整个页面建立联系，那么在页面大小发生变化时，px固定的对象时不会随着页面的变化而伸缩的。所以我们采用 rem 与 em等相对尺寸来处理。
由于REM的特性，我们可用JS建立如下的联系：页面宽度—>根节点font-size,那么我们页面中猜中REM单位的对象就都能自适应了。PS：由于1PX问题,某些需要精细控制大小的对象，我们仍然建议采用px等绝对大小。
3.细节问题
3.1 meta:vp的由来
要在手机上显示PC页面，要么出现滚动条，要么把整个网页缩小，如果我们不设置viewport的宽度，手机浏览器拿到页面之后就会自己做相应的处理。这样对响应式是不利的。我们就设置页面宽度 = 设备宽度就可以了。
Concept: the viewport
In theory, the width of the <html> element is restricted by the width of the viewport. The <html> element takes 100% of the width of that viewport.
——https://www.quirksmode.org/mobile/viewports.html
viewport 是用来限制<html>大小的，在PC端其大小是与浏览器窗口大小一致的，所以往往被我们忽视。但是在移动端，其大小就不一定要与浏览器窗口一致了（因为一致太难看了）
viewport的宽度可以用document.documentElement.clientWidth来衡量。
3.2 媒体查询细节
媒体查询包含一个可选的媒体类型和满足CSS3规范的条件下的零个或多个表达式，这些表达式描述了媒体特征，最终会被解析为true或false。如果媒体查询中指定的媒体类型匹配展示文档所使用的设备类型，并且所有的表达式的值都是true，那么该媒体查询的结果为true.
- link标签使用媒体查询
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
- 样式表中的CSS媒体查询
<style>
@media (max-width: 600px) {
.facet_sidebar {
display: none;
}
}
</style>
3.3 动态rem细节
- 使用 JS 动态调整 REM
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<script>
var pageWidth = window.innerWidth
document.write('<style>html{font-size:'+pageWidth/10+'px;}</style>')
</script>
- 在 scss 文件里添加，这个方法可实现 px 自动变 rem
@function px( $px ){
@return $px/$designWidth*10 + rem;
}
$designWidth : 750;
.child{
width: px(375);
height: px(160);
margin: px(40) px(40);
border: 1px solid red;
float: left;
font-size: 1.2em;
}
网友评论