正文 

当前位置： 首页 > IT > java教程

移动端自适应处理页面布局

Panax Panax     2022-10-28     341

关键词：

处理页面大概会有若干种方案:

  1. 第一种就是使用bootstrap;
  2. 自己使用自适应单位常用的rem，em ,及别人封装好的插件flexble.js;
    在使用flexble.js;时发现两个问题，高度没有很好的展现，有时会比设计稿低，会造成页面扁平不好看，第二种就是容易造成双手指扩大，这个可以在flexble.js 进行配置，在项目index中去掉meta设置，在flexble.js加上nitial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no, shrink-to-fit=no，但是第一个问题没有解决；
  3. 所以放弃使用flexble.js,选用他人使用封装好的rem；是 以750px宽度的设计稿，可以适应大部分手机；但有一点缺陷是早期vivo x7 的一类安卓手机原生浏览器或webview中会出现视觉视口小于布局视口的情况；
    最后综合2,3两个,修改js源码依旧没有调好，最后想到的是宽度设置用百分比，高度用3设置的方案rem;

希望大神有全部适应的方案给个demo,谢谢；

移动端自适应布局方案尝试

原文地址：移动端自适应布局方案尝试问题刚开始接触移动端H5页面的时候最困扰的几个问题是：6或6p上明明是1px的边框怎么就成了2px或3px辣么粗！图片，div等如何等比自适应设计图后来慢慢知道了第一点是由于retina屏幕下设备... 查看详情

移动端自适应布局方案尝试

问题刚开始接触移动端H5页面的时候最困扰的几个问题是：6或6p上明明是1px的边框怎么就成了2px或3px辣么粗！图片，div等如何等比自适应设计图后来慢慢知道了第一点是由于retina屏幕下设备像素比的问题造成，第二点知道了单位r... 查看详情

vw实现移动端自适应页面

一、设备支持情况测试网站：https://caniuse.com/#search=vwcss3test：https://airen.github.io/css3test/，https://github.com/airen/css3test1、PC端2、mobile端二、vw的不足比如当容器使用vw单位，margin采用px单位时，很容易造成整体宽度超过100vw，从而影响... 查看详情

vue判断电脑还是手机设备pc端自适应移动端rem布局

参考技术Apc端所有的页面和移动端都写在一个项目里这时候就需要我在登录的时候判断是什么设备然后跳到相应的页面采用不同的样式可以写在一个js文件里，然后在main.js里统一引入如果是手机端的话我要采用rem布局设计稿是640... 查看详情

vue3.0+vite实现移动端自适应布局

参考技术A然后再main.ts中引入amfe-flexible最后启动项目就会发现px已经是自适应的单位,如果想用原来的px只需改成大写的PX单位即可 查看详情

移动端自适应rem的设置

...果有层层嵌套的话会导致这个值非常大或者非常小。在写移动端页面的时候为了使页面能够适应多种尺寸的移动设备大小，通常会用rem来表示各个元素的大小。rem：fontsizeoftherootelement，即相对于根元素字体的大小。因此，在开发... 查看详情

移动端自适应解决方案

实现移动端自适应大概的几种方法：1.固定宽度，使用一个模式加上少许的媒体查询；2.使用flexbox解决；3.使用百分比加媒体查询；4.使用rem。一、如果是简单app，排版不管分辨率怎么变，关键元素宽高和位置固定，只是元素容器... 查看详情

echars移动端自适应学习笔记

有时会出现一个图表需要同时在PC、移动端上展现的场景。这需要ECharts内部组件随着容器尺寸变化而变化的能力。为了解决这个问题，ECharts完善了组件的定位设置，并且实现了类似 CSSMediaQuery 的自适应能力。ECharts组件的... 查看详情

vue-cli+postcss实现移动端自适应

基于vue-cli3创建一个移动端项目vueaddvue-h5cdvue-h5npmrunserve安装postcss相关插件由于vue-cli已经内置了postcss，只需要安装相关插件，就可以实现vw/vh自适应布局。npmi--savepostcss-aspect-ratio-minipostcss-px-to-viewportpostcss-write-svgpostcss-cssnext 查看详情

jsp页面在移动端自适应，chrome浏览器没问题，可是safari浏览器有问题的解决方法

在网页中设置的1px与物理像素中的1px不会相同，所以导致不同在不同手机上显示结果都不相同，通过以下设置找到了适合当前网页自适应不同手机、不同浏览器的办法，代码如下： “<metaname="viewport"content="width=620px,initial-sc... 查看详情

移动端自适应

此代码加到head标签里面，加入后可随不同机型的移动设备，设置html的fontSize大小，这样子用rem可作为解决移动端自适应的方案 !function(N,M){functionL(){vara=I.getBoundingClientRect().width;a/F>750&&(a=750*F);vard=a/10;I.style.fontSize=d+"px 查看详情

pc端自适应布局

截止目前，国内绝大多数内容为主的网站（知乎，果壳，V2EX，网易新闻等）均使用内容区定宽布局，大多数电商网站（网易考拉，京东，聚美优品）也使用了内容区定宽的布局，也有些网站使用了自适应布局：天猫 内容区... 查看详情

移动端自适应字体大小

设置1rem=100pxwindow.addEventListener((‘orientationchange‘inwindow?‘orientationchange‘:‘resize‘),(function(){functionc(){varhtml=document.documentElement;html.style.fontSize=100*(html.clientWidth/375)+‘ 查看详情

移动端自适应方案(代码片段)

...显示精度问题一像素显示问题，缩放导致的像素适应问题移动端的自适应问题http://www.cnblogs.com/520yan...http://www.cnblogs.com/520yan...https://mp.weixin.qq.com/s?__...https://github.com/amfe/artic...1、 查看详情

pc、移动端自适应布局方案

参考技术A写在前面做一个PC端的网页,设计图是1920X1080的.要在常见屏上显示正常(比例正确可)1280X7201366X7681440X9001920X1080使用了以下几种方案1.内容在一屏内显示的,采用了(内容框)上下左右居中的办法,里面的内容绝对于这个内容框... 查看详情

（转）移动端自适应方案

研究样本手淘 ml.js天猫首页手机携程一个月前去了css开发者大会，听到了手淘的自适应方案，想起之前一直就想了解ml.js到底干了什么事。回来仔细研究了一下，抱着好奇心一并看了同样类型的网站的方案，深入学习一下。... 查看详情

metaviewport设置移动端自适应

1、viewport移动设备上的viewport是设备屏幕上用来显示网页的那部分区域，再具体一点就是浏览器上用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域大，也可能比浏览器的可视... 查看详情

浅谈移动端的自适应问题——响应式rem/em利用js动态实现移动端自适应

　　随着3G的普及，越来越多的人使用手机上网。移动设备正超过桌面设备，成为访问互联网的最常见终端。于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？本篇文章将讲述自适应网页设... 查看详情