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

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;

若有什么问题,可以指出来,指导指导我,互相学习哈哈哈!

原文地址:https://www.cnblogs.com/ycgo/p/10364441.html

时间: 2024-10-11 02:42:19

移动端web自适应适配布局解决方案的相关文章

rem - 移动前端自适应适配布局解决方案和比较(转载)

原文链接:http://caibaojian.com/mobile-responsive-example.html 互联网上的自适应方案到底有几种呢?就我个人实践所知,有这么几种方案:· 固定一个某些宽度,使用一个模式,加上少许的媒体查询方案使用flexbox解决方案使用百分比加媒体查询使用rem淘宝最近开源的一个框架和网易的框架有同工之异.都是采用rem实现一稿解决所有设置自适应.在没出来这种方案之前,第一种做法的人数也不少.类似以下说到的拉钩网.看一下流云诸葛的文章. 1. 简单问题简单解决

移动前端自适应适配布局解决方案和比较

互联网上的自适应方案到底有几种呢?就我个人实践所知,有这么几种方案: 固定一个某些宽度,使用一个模式,加上少许的媒体查询方案 使用flexbox解决方案 使用百分比加媒体查询 使用rem 1. 简单问题简单解决 我觉得有些web app并一定很复杂,比如拉勾网,你看看它的页面在iphone4,iphone6,ipad下的样子就知道了: 它的页面有一个特点,就是: 顶部与底部的bar不管分辨率怎么变,它的高度和位置都不变 中间每条招聘信息不管分辨率怎么变,招聘公司的图标等信息都位于条目的左边,薪资

css布局1:左右宽度固定中间自适应html布局解决方案(同一侧宽度固定,另一侧自适应)

https://www.jb51.net/web/639884.html 本文介绍了详解左右宽度固定中间自适应html布局解决方案,分享给大家,具体如下: a.使用浮动布局 html结构如下(为什么中间的网格宽度显示的和实际的不一样?怎么造成的;解决方法就是让中间的非浮动元素可以看到两边的浮动元素,例如为.center加overflow:hidden) ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <div class="box&quo

[转]再谈移动端Web屏幕适配

一个多月前水了一篇移动web屏幕适配方案,当时噼里啪啦的写了一通,自我感觉甚是良好.不过最近又有一些新的想法,和之前的有一些不同. 先说一下淘宝的方案,感觉现在好多的适配方案都是受了它的影响,上周六看了winter在一个会议的分享,讲到了这个方案.现在你谷歌一下移动web适配,绝对可以看到很多类似的,切活动页的童鞋都忍不住试一把.这些方案和我的博客写的其实还是相似的,就是抛弃了那种viewport直接缩放,然后给定html的初始font-size值,使用rem这个单位. 在屏幕的设备像素比上,也

简单而兼容性好的Web自适应高度布局,纯CSS

纯CSS实现的自适应高度布局,中间内容不符自动滚动条.兼容IE9以上.chrome.FF.关键属性是box-sizing: border-box. 不废话,直接上代码: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> *{padding:0;margin:

移动端Web页面适配方案

概念理解 viewport视口 visual viewport 可见视口,设备屏幕的宽度  windw.innerWidth/Height layout viewport 布局视口,DOM宽度 document.documentElement.cliendWidth/Heig ideal viewport 理想视口:目标是让把默认的layout viewport宽度设置为移动设备的屏幕宽度 visual viewport = layout viewport * scale <meta name=

移动端web适配屏幕方案总结

基础知识点 设备像素:设备像素又称物理像素(physical pixel),设备能控制显示的最小单位,我们可以把这些像素看作成显示器上一个个的点. iPhone5的物理像素是640X1136. PS:在普通屏幕下,1个css像素对应1个物理像素(1:1).        在超高像素密度屏幕(Retina显示屏)下,1个css像素对应4个物理像素(1:4).(这里指专指苹果超高清屏幕)        因此,在移动端方面就需要设置dpr来保证超高清屏显示图片不会失真. 逻辑像素( logical p

移动端web解决方案

范畴 移动端web浏览器.至少需要适配的,UC,QQ,各手机内置浏览器,chrome,safari. 是不是觉得和PC端差不多?错了!每款同一版本ios的内置浏览器一样.但每款同一版本android的不同品牌手机内置浏览器有很多细节上的差别(每个手机运营商称其为优化系统).何况每款浏览器还有不同版本.所以移动端web的坑远多于PC端.这是它有N多辅助库的原因. 优点是,它对CSS3,H5的支持远胜PC端. 解决方案 浅析 原生加载 <script>标签罗列,放body结束标签前 模块化加载 r

web app 自适应 弹性布局之rem

关于rem,主要参考文档 1.腾讯ISUX (http://isux.tencent.com/web-app-rem.html) 2.http://www.w3cplus.com/css3/define-font-size-with-css3-rem 现在移动端 web app 的自适应布局的方案有 5种. 零. Flexbox 使用css3 flexbox 进行布局,对于富媒体和复杂排版的支持非常强大,未普及兼容性非常差,几乎没有在任何项目中得到应用. 一. 弹性布局 使用 em 或 rem