移动端适配

Ververica 发布于2019-08-21 18:27 / 465人阅读

摘要：三种因为手机的分辨率越来越大，为了让手机显示电脑浏览器的网页正常，浏览器默认情况下把设为或者，这样即使是那些为桌面设计的网站也能在移动浏览器上正常显示，这就是，它的宽度可以通过。

meta viewport

viewport的概念

移动设备上面的viewport就是设备上的屏幕用来显示网页的那块区域，叫做视口，但是在默认情况下，移动设备上的viewport是要大于浏览器可视区域的，因为移动设备的分辨率相对于电脑来说比较小，所以为了能在移动设备上正常显示那些传统的电脑浏览器设计的网站，移动设备上的浏览器都会把自己默认的viewport设为980px或者1024px，所以移动设备上浏览器会出现横向滚动条，因为浏览器可视区域宽度小于viewport

css中的1px不是设备的1px

css中的像素只是一个抽象的单位，在不同设备或者不同环境中，css中的1px所代表的设备物理像素是不同的。
在早先的移动设备中，屏幕像素密度低，一个css像素确实就是一个屏幕物理像素，当后来移动设备屏幕分辨率变高，但屏幕尺寸没有变，这时，一个css像素是等于两个物理像素的，所以css像素相当于多少物理像素是不确定的。

三种viewport

layout viewport:因为手机的分辨率越来越大，为了让手机显示电脑浏览器的网页正常，浏览器默认情况下把viewport设为980px或者1024px，这样即使是那些为桌面设计的网站也能在移动浏览器上正常显示，这就是layout viewport，它的宽度可以通过document.documentElement.clientWidth。

visual viewport:因为layout viewport的宽度是大于浏览器可视区域的宽度，所以需要一个viewport代表浏览器可视区域的大小，这就是visual viewport，它可以用window.innerWidth来获取

ideal viewport：为移动设备多带带设计，需要一个能完美适配移动设备的viewport，不需要用户缩放和横向滚动条就能正常查看网站的内容

利用meta viewport来控制viewport

进行移动设备开发时，将下面的代码复制到head标签中：

该标签可以使移动设备开发时使用ideal viewport

width=device-width: 让当前viewport宽度等于设备的宽度

user-scalable=no: 禁止用户缩放

initial-scale=1.0: 设置页面的初始缩放值为不缩放

maximum-scale=1.0: 允许用户的最大缩放值为1.0

minimum-scale=1.0: 允许用户的最小缩放值为1.0

媒体查询

媒体查询可以根据用户设备屏幕大小和横向或纵向来提供不同的样式，使用方法：

link元素中的css媒体查询:

样式表中的css媒体查询

@media (max-width: 600px) {

}

可以根据自定义条件来设置媒体的样式

动态rem

要保持页面布局按照比例布局
什么是rem，rem是相对尺寸单位，相对于html标签字体大小的单位
所以我们通过用js来控制html标签的font-size值:

    document.documentElement.style.fontSize = window.innerWidth / 10 + "px";

使用rem，这样保持了整体页面的比例，不会导致页面变形

云服务器 GPU云服务器移动端适配移动端适配方案移动端适配 js 移动适配

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

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

移动端布局与适配

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

Clect 2019-08-29 14:08 评论0 收藏0
移动端适配方案

摘要：业务环境是决定整体项目的适配方案的核心因素。而淘宝的主站和类似，分为移动端页面和端页面，端页面同样有着左右的留白，这也是为了让用户能够在宽屏的时候将注意力集中在中间区域。移动端适配方案移动端适配方案是一个老生常谈的话题，但是对于不同的项目、不同的业务场景可能会需要不同的适配方案来进行移动端适配，向下兼容的baseline也需要提前订好。整体宽高其实移动端适配就和下面的玩具一样，...

feng409 2019-08-30 15:54 评论0 收藏0
rem, vw, 还是...? 各凭本事的移动端适配方案

摘要：另一种就是不缩放，对等问题单独引入处理方案。彩蛋部分相信大多数同学也是有想法在实际开发中把融入到现有的移动端适配方案中的。前言 2018年最后的法定假期都已经结束了，我相信大部分正在进行或曾经进行过移动端页面开发的同学都或多或少的了解过使用rem进行移动端页面适配的方案以及使用vw的方案，(没了解过的同学可以参见大漠老师的这两篇文章使用Flexible实现手淘H5页面的终端适配和再...

wangbinke 2019-08-29 16:56 评论0 收藏0
rem, vw, 还是...? 各凭本事的移动端适配方案

摘要：另一种就是不缩放，对等问题单独引入处理方案。彩蛋部分相信大多数同学也是有想法在实际开发中把融入到现有的移动端适配方案中的。前言 2018年最后的法定假期都已经结束了，我相信大部分正在进行或曾经进行过移动端页面开发的同学都或多或少的了解过使用rem进行移动端页面适配的方案以及使用vw的方案，(没了解过的同学可以参见大漠老师的这两篇文章使用Flexible实现手淘H5页面的终端适配和再...

tianren124 2019-08-23 12:21 评论0 收藏0
我对移动端适配的了解

摘要：随着移动端的发展，在手机上看电脑端的页面已成为非常普及现象。方案一固定高度，使其宽度自适应这也是我接触移动端适配第一次使用的方案。不知不觉做前端已经两年了，从PC端，移动端，微信小程序一路走来到今天刚刚开放注册的快应用(手机厂商对抗小程序的新技能,所以在注册时用的是qq邮箱的话要去垃圾箱里才能找到注册邮件)，对于前端圈日新月异的磅礴发展对于大前端发展是喜闻乐见的，这次的快应用的手机厂...

import. 2019-08-30 14:16 评论0 收藏0
我对移动端适配的了解

摘要：随着移动端的发展，在手机上看电脑端的页面已成为非常普及现象。方案一固定高度，使其宽度自适应这也是我接触移动端适配第一次使用的方案。不知不觉做前端已经两年了，从PC端，移动端，微信小程序一路走来到今天刚刚开放注册的快应用(手机厂商对抗小程序的新技能,所以在注册时用的是qq邮箱的话要去垃圾箱里才能找到注册邮件)，对于前端圈日新月异的磅礴发展对于大前端发展是喜闻乐见的，这次的快应用的手机厂...

snowLu 2019-08-22 15:45 评论0 收藏0