【前端】移动端Web开发学习笔记【2】 & flex布局


meta标签

  • width设置的是layout viewport 的宽度
  • initial-scale=1.0 自带 width=device-width
  • 最佳实践:<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

Flex弹性盒模型

来源:慕课网

源HTML文件(备份下载):web_flex.html.zip

【前端】移动端Web开发学习笔记【2】 & flex布局


Flexbox兼容性问题

  • iOS、Android4.4及以上,可以使用最新的flex布局
  • Android4.4以下,只能使用旧版的flexbox布局

新版flex布局 和 旧版flexbox布局 对比:

新flex布局 旧flexbox布局
display: -webkit-flex; display: -webkit-flex-box;
-webkit-flex: 1; -webkit-flex-box: 1;
justify-content: center; box-pack: center;
align-items: center; box-align: center;

响应式设计

媒体查询:

媒体类型:

  • screen (屏幕) (常用)
  • print (打印机)
  • handheld (手持设备)
  • all (通用) (常用)

常用的媒体查询参数:

  • width, height (viewport宽高)
  • divice-width, device-height (设备的宽高)
  • orientation: 检查设备处于landscape还是portrait

媒体查询示例:

@media screen and (max-width:1024px) {
/* ... */
}

设计点1:百分比布局

使用媒体查询来适应不同的固定宽度,只会从一组css切换到另一组css, 没有平滑渐变。当没有命中媒体查询时,变现就变得不可控(滚动,换行)。

所以需要百分比布局。

设计点2:弹性图片

类似第一点,图片也使用百分比。

img {
max-width: 100%;
height: auto;
}

设计点3:重新布局,显示与隐藏

当页面宽度过小时,就需要做出一些处理:

  1. 同比例缩减元素尺寸
  2. 调整页面元素布局
  3. 隐藏冗余的元素
  4. 经常需要切换位置的元素使用绝对定位,可以提高性能。

总结:

缺点:

  • 根据响应式设计的理念,一个页面包含不同设备的样式和图片。这样就造成了冗余。性能也不是最优。

优点:

  • 减少重复开发。

移动Web的特别样式处理

高清图片

在retina屏幕上渲染图片,为了避免图片产生模糊,图片的宽高应该用物理像素单位渲染。

100*100的图片,应该使用100dp*100dp.

例子:

  • width: (w_value/dpr)px;
  • height: (h_value/dpr)px;

1像素边框

在retina屏幕上渲染图片,1px使用2dp或者3dp渲染。

解决方法:

  • 方法一:border: 0.5px; /* 只有iOS8可以用 */
  • 方法二:scaleY(0.5):

【前端】移动端Web开发学习笔记【2】 & flex布局

相对单位rem

  • em: 相对于父节点的font-size (em在多层嵌套下,非常难以维护)
  • rem: 相对于html的font-size

rem的基值怎样设置:

rem = screen.width / 10

或者 rem = screen.width / 20

【前端】移动端Web开发学习笔记【2】 & flex布局

不使用rem的情况:font-size

一般来讲,font-size是不应该使用rem等相对单位的。应为字体应该首先保证阅读的实用性,其次才是排版布局。

多行文本溢出

【前端】移动端Web开发学习笔记【2】 & flex布局

上一篇:ASP.NET Core Web开发学习笔记-1介绍篇


下一篇:habse Region server挂掉