首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

移动适配

实习期间主要在写微信H5,遇到最大问题就是适配各个不同尺寸屏幕。公司就我自己一个前端,只能自己摸索着来。...方法1:媒体查询 这是最笨工作量最大方法了,就是一个屏幕尺寸一个屏幕尺寸适配,当然你没办法适配到所有的手机型号,有的手机比较奇葩,同样是5.5寸,有的矮胖,有的瘦高。...我方法是以iphone6为准,然后向上适配5.5寸,向下适配4.7iphone5,这个时候就能自适应市场上一些主流屏幕,然后在对其他品牌手机挑一部分手动适配。...在很早之前找解决方案时候就看到这篇文章了——使用Flexible实现手淘H5页面的终端适配。...简单讲就是用 js 动态改变 标签,然后用rem作为单位,因为rem就是根据font-size来做计算,由此对不同屏幕尺寸进行适配。 神器。以后项目应该都会使用这个方案。

2.2K20

移动适配之viewport适配

前面说过了比例缩放适配,本来想直接介绍rem适配!还是补充一下这个viewport适配吧!其实这个viewport也归属于比例缩放适配一种吧!...首先我们可以获取到当前设备独立像素(window.screen.width),然后通过适配像素比(dpr)还原其真实逻辑像素(物理像素),然后在其还原后设备像素上进行适配....那么这个viewport适配有什么问题呢?...document.head.appendChild(meta); })() 通过不同设备比例以及,对于物理像素关闭得出缩放scalc=1/dpr,通过这个获取到动态缩放比例来动态设置...(比例缩放时候讲过),尽管这样,也算尽量尽可能适配!随后继续介绍较为完美的rem布局适配方案!淘宝布局方案,也算此种方式!不过适配是dpr2.0!

94810
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    探讨移动适配

    在探讨移动适配前我们先要了解下面几个概念 像素 分辨率 物理像素 CSS像素 像素 像素(Pel,pixel;pictureelement),为组成一幅图像全部亮度和色度最小图像单元。...所以,有如下公式: DPR = 设备像素/CSS像素 了解上面的东西后接下来我们来探讨移动适配问题 注意在不同屏幕,单位像素大小是不同,像素越小屏幕越清晰,智能手机像素点是远远小于显示器像素点...这就是pc网页没有做移动适配情况下,在移动看上去会非常小,我们要通过缩放才能正常浏览网页,当然这个体验并不是很好 这也就是我们常说布局视口 完美视口(理想视口) 默认情况下 移动像素比为...980/移动宽度 布局视口带来问题是 如果我们直接在网页中编写移动代码,在980视口下像素比是非常不友好 也就是 1px =0.几物理像素,这样就会导致网页中内容非常非常小 因此在编写移动页面时...用户是否可以缩放 移动布局适配解决方案 rem+flexible rem+css预处理+媒体查询与rem+flexible.js做网页适配 vw,vh 1.vw:1vw等于视口宽度1% 2

    1.3K10

    移动适配大法

    本文作者:IMWeb 嵘么么 原文出处:IMWeb社区 未经同意,禁止转载 前言 前端代码编写永远逃不过“兼容”二词,从前PC时代,因为IE傲娇,导致程序猿们一直在兼容IE道路上挣扎,如今移动设备普及...一波还未平息,一波又来侵袭~移动确实不用考虑IE了,各种CSS新特性也用爽到飞起,但一座大山压了过来,那就是分辨率适配移动端由于展示区域比较小,因此对于页面在不同分辨率手机上展示细节也要求更加严格...,这时像PC有些固定宽高布局方式显然不适应,我们被要求对于不同大小手机页面能自适应,真是非常有(tong)趣(ku)呢~ 话不多说,下面就总结了一些移动常用适配手法: 一、百分比 使用场景:只要求宽度随屏幕自适应...二、rem 使用场景:对于图片等对高度自适应有要求场景 rem单位:以页面根字体大小,也就是html元素字体大小为基准,例如 html{ font-size:16px; } 那么1rem...三、媒体查询 使用场景:一般利用媒体查询来进行特殊处理,比如 1、iphoneX这类全屏适配 2、在适配dpr为3iPhone Plus或者pad横屏等超级大屏时,需要根据业务需求设置临界值,然后展示不同内容或者替换不同分辨率图片

    2.7K20

    移动适配之比例缩放适配

    前面一篇简单介绍了适配方案(百分比适配),对于百分比适配也是挺多问题,这次介绍一下viewport适配方案! 适配思想呢?...就是比如ip6设备独立像素(375px),这个设备独立像素介绍移动时候说过可以使用缩放进行改变!...此时我们可以将所有的设备独立设备像素转为375px(ip6),然后进行渲染适配,在375px上就行布局! 那么这个比例缩放适配存在什么问题呢?...但是750px图像等,在原始独立像素大于414设备可能出现图像失真等问题,后面会详细介绍一下移动终极适配方案rem适配 本博客所有文章如无特别注明均为原创。...原文地址《移动适配之比例缩放适配》 分享到:更多 标签: 移动适配 比例缩放适配

    1.2K30

    pageResponse - 移动适配框架

    HTML5学堂:移动布局一直都是一个问题,各种各样分辨率使得移动布局需要耗费大量时间。今天介绍一个框架pageResponse.js可以让页面在各种分辨率手机下都能完全不走样。...通常移动布局方式 1、rem布局,通过动态设置根目录下font-size达到元素大小“自适应”,通常和百分比布局一起使用 2、固定像素设固定视口宽度。...结束语 移动有很多做法,对于我来说之前提到三种常用方法我都用过,而他们经常是结合着用,单独存在往往不能够满足需求,就拿一个简单例子来说 main footer 竖屏时候你希望footer在底部...移动看似简单,布局上却有非常多细节问题。因此多学多思考,学如逆水行舟,不进则退。希望大家能多对比多思考,方法总有优缺点,懂得如何互助互补才是关键。...案例和资源 详细案例和js下载,可查看文章——>pageResponse - 让H5适配移动设备全家,小编在书写本文时也查看了这篇文章,感觉还是可以,也很感谢该作者分享。

    1.1K60

    移动适配vw方案

    # 1、前言 设计师交付给前端开发一张宽度为750px视觉稿,设计稿上元素尺寸、颜色、位置等已做过标注,要求工程师工在适配不同屏幕尺寸设备时采用等比缩放方案。...# 2、原理 vw是相对单位,1vw表示屏幕宽度1%。基于此,我们可以把所有需要适配屏幕大小等比缩放元素都使用vw做为单位。不需要缩放元素使用px做单位。 举个例子。...# 3、适配代码 假设设计稿尺寸是750px,页面有一个按钮,按钮文字标注大小28px,按钮高度标注为48px,宽度为120px,边框为1px不缩放。 <!...viewport缩放方案 适配原理简单 需要使用JS 直接使用设计稿标注无需换算 方案死板只能实现页面级别整体缩放 动态REM方案 适配原理稍复杂 需要使用JS 设计稿标注px换算到CSSrem...计算简单 方案灵活技能实现整体缩放又能实现局部不缩放 vw方案 适配原理简单 不需要JS即可适配 设计稿标注px换算到CSSvw计算复杂 方案灵活技能实现整体缩放又能实现局部不缩放

    1.1K20

    移动」Web页面适配

    一、什么是移动适配 移动 Web 页面,就是常说手机 h5页面、webview页面、公众号开发网页等。...由于手机机型较多,各个手机屏幕尺寸不一样,所以做移动页面,需要考虑在安卓和ios各种尺寸设备兼容问题,我们要做 web 页面适配,就是为了在不同设备上,页面能够保持统一展示效果,或等比缩放。...二、移动适配方案 常见移动适配方案有以下几种: viewport 盒模型 flex rem 2.1、viewport - 可视区 最初手机需要照顾 PC ,如果不设置 viewport,直接访问网页时候...,我们发现网页内容看着很小,这是因为页面按照PC最小宽度980展示,也就是我们网页宽度就是980,而手机屏幕宽度通常375、411、320、414等,没有980那么大,所以页面被缩小了很多。...viewport 设置可视区之后,就会把网页宽度设置为移动设备屏幕宽度。 如想深入学习,可查阅《viewport深入理解和使用 - 前端人 - 博客园》。

    1.2K40

    移动」Web页面适配

    一、什么是移动适配 移动 Web 页面,就是常说手机 h5页面、webview页面、公众号开发网页等。...由于手机机型较多,各个手机屏幕尺寸不一样,所以做移动页面,需要考虑在安卓和ios各种尺寸设备兼容问题,我们要做 web 页面适配,就是为了在不同设备上,页面能够保持统一展示效果,或等比缩放。...二、移动适配方案 常见移动适配方案有以下几种: viewport 盒模型 flex rem 2.1、viewport - 可视区 最初手机需要照顾 PC ,如果不设置 viewport,直接访问网页时候...,我们发现网页内容看着很小,这是因为页面按照PC最小宽度980展示,也就是我们网页宽度就是980,而手机屏幕宽度通常375、411、320、414等,没有980那么大,所以页面被缩小了很多。...viewport 设置可视区之后,就会把网页宽度设置为移动设备屏幕宽度。 如想深入学习,可查阅《viewport深入理解和使用 - 前端人 - 博客园》。

    2.3K40

    移动」Web页面适配

    一、什么是移动适配 移动 Web 页面,就是常说手机 h5页面、webview页面、公众号开发网页等。...由于手机机型较多,各个手机屏幕尺寸不一样,所以做移动页面,需要考虑在安卓和ios各种尺寸设备兼容问题,我们要做 web 页面适配,就是为了在不同设备上,页面能够保持统一展示效果,或等比缩放。...二、移动适配方案 常见移动适配方案有以下几种: viewport 盒模型 flex rem 2.1、viewport - 可视区 最初手机需要照顾 PC ,如果不设置 viewport,直接访问网页时候...,我们发现网页内容看着很小,这是因为页面按照PC最小宽度980展示,也就是我们网页宽度就是980,而手机屏幕宽度通常375、411、320、414等,没有980那么大,所以页面被缩小了很多。...viewport 设置可视区之后,就会把网页宽度设置为移动设备屏幕宽度。 如想深入学习,可查阅《viewport深入理解和使用 - 前端人 - 博客园》。

    1.4K40

    –我对移动适配了解

    [总结]我对移动适配了解 不知不觉做前端已经两年了,从PC移动,微信小程序一路走来到今天刚刚开放注册快应用(手机厂商对抗小程序新技能,所以在注册时用是qq邮箱的话要去垃圾箱里才能找到注册邮件...今天主题是讲的是我对移动多终端适配解决方案和移动适配有关布局知识总结,下面正式开始。...在手机互联网没有普及前,网络上绝大部分页面都是为电脑浏览而做,根本没有做移动适配。 随着移动发展,在手机上看电脑页面已成为非常普及现象。...此时把pc尺寸拿来手机看时字体和元素会特别大只。 现在移动设计稿都是基于iphone设计,一般为750px或640px,对应是iphone6和iphone5物理像素。...Flexible实现手淘H5页面的终端适配 方案五: 可以来看看我总结 : 大漠老师最新vw移动适配方案

    2K30

    移动适配动态rem方案

    # 1 前言 设计师交付给前端开发一张宽度为750px视觉稿,设计稿上元素尺寸、颜色、位置等已做过标注,要求工程师工在适配不同屏幕尺寸设备时采用等比缩放方案。...使用viewport缩放方案实现页面级缩放适配。但该方案有个问题,1px边框在大屏手机被放大后显得很粗,在小屏手机上被缩小后又显得太细。...2rem 等于html标签font-size2倍。基于这个原理,对于需要适配屏幕等比缩放元素可以选用rem作为单位,对于不需要等比缩放元素依旧使用px作为单位。...举个实际例子。设计师交付设计稿宽度是750px,设计稿上一个div标注尺寸是375px(宽度是设计稿宽度一半)。...如果htmlfont-size 设置为 50*屏幕宽度/设计稿宽度,那么div宽度就应该是7.5rem了。换算起来就没那么直观了。 # 3 适配代码 <!

    77010

    css移动适配最佳实践

    移动适配,在移动里经常有遇到,在不同分辨率移动设备精确还原UI设计稿,这是一个令人抓狂问题,好在有flex,box布局解决了自适应很大一部分问题。...width=device-width,initial-scale=scale,minimum-scale=scale,maximun-scale=scale 当我们动态设置meta后,我们不同分辨率下字体大小就会动态发生变化...640x960 750x1334 注意targetWidth是你设计稿尺寸,如果是750设计稿,那么就是375,在设计稿中量是多少尺寸,就是多少固定尺寸 rem适配 因为默认浏览器字体大小就是... 这种方案在早期移动rem适配用得比较多 vw适配 vw是视口单位.../lessonNote/tree/master/html/08-移动适配方法 最后,看完觉得有收获,点个赞,在看,转发,收藏等于学会,欢迎关注Web技术学苑,好好学习,天天向上!

    89420

    移动适配viewport缩放方案

    # 1、前言 设计师交付给前端一张宽度为750px视觉稿,并对设计稿上元素尺寸、颜色、位置等做了标注,要求工程师工在适配不同屏幕尺寸设备时采用等比缩放方案。...采用viewport缩放方案能又快又好实现需求。 # 2、原理 在写HTML、CSS对设计稿进行还原时不关注屏幕尺寸差异,而是直接按设计稿标注来开发。...之后需要通过JavaScript计算获取屏幕宽度(假设需要适配逻辑像素宽度是428px屏幕),在HTMLhead里添加<meta name="viewport" content="width=750px...这段代码<em>的</em>意思是:设置布局视口(layout viewport)<em>的</em>宽度为750px(此时页面一般会超出屏幕),再缩放页面(initial-scale)使其恰好撑满屏幕。 # 3、<em>适配</em>代码 <!...<em>适配</em>范围广。 缺点:页面整体放大缩小,对于不想缩放<em>的</em>元素无法控制。比如边框在大屏手机下显得很粗,在小屏手机下显得很细。

    1.4K20

    移动适配解决方案

    优化以前写过一篇文章:https://www.cnblogs.com/beileixinqing/p/11283315.html 目前常见移动适配方案 1、媒体查询 通过写媒体查询,在不同分辨率下写对应不同样式...;而在移动较为复杂,它涉及到三个视口:分别是 Layout Viewport(布局视口)、 Visual Viewport(视觉视口)、Ideal Viewport。...而视口单位中“视口”,在桌面,毫无疑问指就是浏览器可视区域;但是在移动,它指则是三个 Viewport 中 Layout Viewport 。 ?...dpr = devicePixelRatio; //这里将原来=1改为devicePixelRatio } 然后写针对不同dpr下字体大小适配,这里用less实现: .font-dpr(@font-size...此方法实现适配,可以很好做平板适配,只需要限制最大font-size就可以,对于横屏下显示字体大小设置,个人感觉一个很方便方法,直接在横屏下所有的vw改为vh即可,唯独在页面是横屏但宽高差别不大时候

    1.3K30
    领券