实现思路

字体自适应

• 通过写js控制最大fontSize
• 通过动态调整root的fontSize
• 通过rem实现自适应

不声明过多的font-size：这是设计层面的问题，设计精良的页面不会有过多的font-size声明。

图片来源：www.bilibili.com/video/BV1ov…

通过媒体查询控制root的fontSize

参考antd-design源码

断点

// Media queries breakpoints
// @screen-xs and @screen-xs-min is not used in Grid
// smallest break point is @screen-md
@screen-xs: 480px;
@screen-xs-min: @screen-xs;
// 👆 Extra small screen / phone

// 👇 Small screen / tablet
@screen-sm: 576px;
@screen-sm-min: @screen-sm;

// Medium screen / desktop
@screen-md: 768px;
@screen-md-min: @screen-md;

// Large screen / wide desktop
@screen-lg: 992px;
@screen-lg-min: @screen-lg;

// Extra large screen / full hd
@screen-xl: 1200px;
@screen-xl-min: @screen-xl;

// Extra extra large screen / large desktop
@screen-xxl: 1600px;
@screen-xxl-min: @screen-xxl;

// provide a maximum
@screen-xs-max: (@screen-sm-min - 1px);
@screen-sm-max: (@screen-md-min - 1px);
@screen-md-max: (@screen-lg-min - 1px);
@screen-lg-max: (@screen-xl-min - 1px);
@screen-xl-max: (@screen-xxl-min - 1px);

通过宽度来查询

@media only screen and (max-width: 767.99px) {
    ...
}

@media (max-width: @screen-sm-min) {
    ...
}

通过分辨率的<resolution>查询

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx)

html:not([data-scale]) .am-modal-button-group-h .am-modal-button:last-child {

 border-left: none;

}

-webkit-min-device-pixel-ratio 非标准

该特性是非标准的，请尽量不要在生产环境中使用它！

测试工具

Responsive Viewer

上图数据是获取设备尺寸

www.zhangyunling.com/study/2018/…

document.documentElement.clientWidth
document.documentElement.clientHeight
document.body.clientWidth
document.body.clientHeight
window.innerWidth
window.innerHeight
screen.availWidth
screen.availHeight
screen.width
screen.height

来源：www.zhangyunling.com/814.html

iPhone12

docEl.client=390-661;
docBody.client=390-0;
window.inner=390-661;
screen.avail=390-844;
screen.=390-844

TODO

• 写一个更好的读取设备的html
• 如何设计好代码，避免使用过多的font-size
• mobile和web是同一套代码吗？
  • 参考淘宝 苏宁易购等网站

  淘宝网页版：www.taobao.com/

  淘宝手机版：main.m.taobao.com/