上一篇博文,可算把像素这个东西讲清楚了.在这篇博文里面,将继续介绍viewport相关的内容. 很多博客都会提到PPK所讲的三个viewport,有的讲的比较复杂,看的云里雾里,我这里也大概介绍一下,三个viewport主要是相对于移动端而言的. visual viewport 这个是浏览器给我们用的.能真正用来显示网页内容的区域,可以通过下面的js命令获取: window.innerWidth window.innerHeight 正如上篇博客所说的,前端里面能获取到的像素基本上都是CSS像素…

移动端适配 通过rem适配 em: 根据元素自身的字体大小来计算自己的尺寸 rem: (root em) 根据根节点(html)的字体大小来计算自己的尺寸   我们知道,在不同的手机设备,分辨率大小是不一样的.为了使页面在不同分辨率下等比缩放,需要动态的设置Html的字体大小来达到页面等比缩放的效果.我们可以如下设置rem值: function() { var html = document.querySelector("html"); var width = html.getBoun…

移动端适配的相关概念以及几种方案总结 适配相关概念 布局视口(layout viewport):html元素的上一级容器即顶级容器,用于解决页面在手机上显示的问题.大部分移动设备都将这个视口分辨率设置为980px,所以PC上的网页基本上能在手机上呈现,只不过看上去很小,一般默认可以通过手动缩放网页.获取当前布局视口用document.documentElement.clientWidth 视觉视口(visual viewport):指用户可见页面区域,即屏幕显示器的物理像素.获取当前的视觉视口可…

前言 工作以后,大部分的业务工作都是基于移动端H5的,开发过程中学习了很多东西,遇到过许多问题,诸如rem\em\css px\device px等,本文纯属个人的归纳总结,如有问题,请指出亲喷~ PC端 本文主要是讲解移动端的响应式布局, 但是在真正进入之前, 先了解一些概念. device px(设备像素)和 css px(css像素) 通常在PC端上面,我们并不需要考虑设备像素和css像素之间的差别,以目前的pc来看,1个设备像素通常等于1个css像素.可以使用screen.width/h…

前言 移动互联网发展至今,各种移动设备应运而生,但它们的物理分辨率可以说是五花八门,一般情况UI会为我们提供375尺寸的设计稿,所以为了让H5页面能够在这些不同的设备上尽量表现的一致,前端工程师就不得不对页面进行移动端适配了. 「如果这篇文章有帮助到你,️关注+点赞️鼓励一下作者,文章公众号首发,关注 前端南玖 第一时间获取最新文章-」 前置知识 在学习移动端适配前我们需要了解一些相关的前置知识. 屏幕尺寸 屏幕尺寸指的是以屏幕对角线的长度来计算的,单位是英寸.1英寸=2.54厘米 电子设备一般…

文章地址: viewport移动端适配 笔记: 移动端适配目的: 希望在屏幕尺寸大小不同的手机上进行访问页面时,页面显示的效果能合理的展示,我们期望的是在手机屏幕较大时显示的内容比较大一些,手机屏幕小的时候页面的内容也会缩小进行自适应. 手机端适配代码 <meta name="viewport" content="width=device-width,user-scalable=no, initial-scale=1.0, maximum-scale=1.0,minim…

一.布局方案 目前在解决移动端页面适配问题方案选择上,目前用得比较多是百分比布局,弹性布局flex,rem布局,本文将重点跟大家探讨rem布局. 二.viewport 在介绍rem布局之前,首先跟大家介绍一下viewpoint视口. 通俗的讲,移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域,在具体一点,就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域,但viewport又不局限于浏览器可视区域的大小,它可能比浏览器的可视区域要大,也可能比…

对于移动端开发来说,无可避免的就是直面各种设备不同分辨率和不同DPR(设备像素比)的问题,在此忽略其他兼容性问题的探讨. 一. 移动端开发有关于像素的概念: 1.设备像素(dp),也叫物理像素.指设备能控制显示的最小物理单位,意指显示器上一个个的点.从屏幕在工厂生产出的那天起,它上面设备像素点就固定不变了. 2.分辨率,屏幕上物理像素的数量. 3.设备独立像素(dip),又称密度无关像素.可以认为是计算机坐标系统中的一个点,这个点代表一个可以由程序使用并控制的虚拟像素.由相关系统转化为物理像素在…

引言: H5适配一直是一个比较普遍的问题,很多文章都会讲,最近开发了一个H5的项目使用了一下淘宝的 flexible.js,写一篇文章自己总结一下. 一.背景介绍: Flexible.js是淘宝公开的一种移动端适配方案,用来解决H5开发中的各个机型适配问题,是一种比较成熟的适配方案. 二.使用方法: 在html头部引入flexible.js,最好放在最头部,重构时使用rem替代px像素即可,flexible会做好所有适配.换算关系为1rem对应1/10设计尺寸,如ipone6设计尺寸为750px…

曾几何时,前端还仅仅是PC端的.随着移动时代的兴起,h5及css3的推陈出新.前端的领域慢慢的由传统的pc端转入了移动端,这也导致了前端这一职业在风口的一段时间出尽了风头. 从开始的惶恐和无从下手,慢慢的到了有了统一的技术方案去落地实现. 从手写不同尺寸的媒体查询css到以手淘的flexible.js来进行移动端的适配,虽然过程曲折,不过效果也是十分的显著,因为有了成熟的体系以后.什么东西就有据可寻,适配也就没那么困难了. 但是,因为这次引入了高德地图,所以在适配上出现了一点意料之外的问题. 首…