移动端web自适应适配布局解决方案

番茄西红柿发布于2019-04-23 11:50 / 754人阅读

摘要：还原设计图，要注意看布局，分析结构。感觉难点在于测量精度测量数据文字的行高。

100%还原设计图，要注意：

看布局，分析结构。

感觉难点在于： 1.测量精度（ps测量数据）； 2.文字的行高。

前段时间写个移动端适配的页面（刚接触这方面），查了一些资料，用以下方法能实现：

1.设置理想视口： 自动适应屏幕宽度：网页的宽度默认等于屏幕的宽度

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

2.动态设置fontSize：

function resize() {
    let width = window.screen.width;
    const basicvalue = 1024; //设计稿上的分辨率大小
    
    //放大100倍，为了方便计算rem大小
    document.documentElement.style.fontSize = (width / basicvalue) * 100 + px;
}

//加上以下代码是为了切换设备时能时刻刷新动态fontSize，从而得到正确的布局
window.addEventListener(resize, function () {
    resize();
});
window.addEventListener(DOMContentLoaded, function () {
   resize();
});

3.还需要css样式中用@media设置fontSize： 需要额外的媒介查询

html{
   font-size: 100px;
}

@media only screen and (min-device-width:320px) and (max-device-height:568px){
   html{
      font-size: 42.6667px;
   }
}
@media only screen and (min-device-width:375px) and (-webkit-min-device-pixel-ratio:2){
   html{
      font-size: 50px;
   }
}
@media only screen and (min-device-width:412px) and (-webkit-min-device-pixel-ratio:3){
   html{
      font-size: 55.2px;
   }
}

之后布局的宽高及边距等都可以用rem来布局了，即100px = 1rem；若有什么问题，可以指出来，指导指导我，互相学习哈哈哈！

云服务器 GPU云服务器移动端自适应移动端适配方案 web移动端布局移动端适配

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1237.html

移动前端 - 收藏集 - 掘金

摘要：使用移动设备查看页面时会发现，在微信浏览器中有顶部导航栏有效解决图片使用单位边角缺失的问题前端掘金起因在移动端使用布局时图片也需要用单位。移动端实践前端掘金说起，相信大家并不陌生。 Sticky Footer，完美的绝对底部 - 前端 - 掘金写在前面做过网页开发的同学想必都遇到过这样尴尬的排版问题：在主体内容不足够多或者未完全加载出来之前，就会导致出现（图一）的这种情况，原因是因为...

Jochen 2019-08-29 12:43 评论0 收藏0
HTML-CSS

摘要：但是，从字体上来说雪碧图制作，使用以及相关，图文。由于采用了编译，所以能够保证在浏览器不支持标准布局的情况下，回滚到旧版本的，保证移动设备中能呈现出一样的布局效果。我不想陷入和的纷争，但是有一件事是确定的极大的提升了移动端一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 ...

xiaokai 2019-08-01 18:21 评论0 收藏0
HTML-CSS

摘要：但是，从字体上来说雪碧图制作，使用以及相关，图文。由于采用了编译，所以能够保证在浏览器不支持标准布局的情况下，回滚到旧版本的，保证移动设备中能呈现出一样的布局效果。我不想陷入和的纷争，但是有一件事是确定的极大的提升了移动端一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 ...

CHENGKANG 2019-08-29 14:11 评论0 收藏0
移动端布局与适配

摘要：实战之微信钱包腾讯服务界面网格布局是让开发人员设计一个网格并将内容放在这些网格内。对于移动端适配，不同的公司不同的团队有不同的解决方案。栅格系统用于处理页面多终端适配的问题。 grid实战之微信钱包腾讯服务界面 CSS3网格布局是让开发人员设计一个网格并将内容放在这些网格内。而不是使用浮动制作一个网格，实际上是你将一个元素声明为一个网格容器，并把元素内容置于网格中。移动端页面适配—...

Clect 2019-08-29 14:08 评论0 收藏0
Web网页布局的主要方式

摘要：改变屏幕分辨率可以切换不同的静态局部页面元素位置发生改变，但在每个静态布局中，页面元素不随窗口大小的调整发生变化。即创建多个流体式布局，分别对应一个屏幕分辨率范围。一、静态布局（static layout）　　即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。 1、布局特点　　不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态...

blastz 2019-08-30 13:50 评论0 收藏0