最流行的四种移动端布局方式,看这一篇文章就够了

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了最流行的四种移动端布局方式,看这一篇文章就够了相关的知识,希望对你有一定的参考价值。

参考技术A 众所周知,pc端呢目前处于一种三家分晋,即三种内核(webkit,blink,gecko),当然算上马上要更换内核的IE那就是四个。而我们的移动端呢,那就是万余基于webkit了,所以各位进行移动端web开发时,只考虑webkit的适配就可以了,怎么样,开不开心 ?

我们先来看看什么是视口,视口就是浏览器显示页面内容的屏幕区域。 视口可以分为布局视口、视觉视口和理想视口,他又可以分成一下四种

一般移动设备的浏览器都默认设置了一个布局视口,用于解决早期的PC端页面在手机上显示的问题。

ios, android基本都将这个视口分辨率设置为 980px,所以PC上的网页大多都能在手机上呈现,只不过元素看上去很小,一般默认可以通过手动缩放网页。

字面意思,它是用户正在看到的网站的区域。注意:是网站的区域。

我们可以通过缩放去操作视觉视口,但不会影响布局视口,布局视口仍保持原来的宽度。

为了使网站在移动端有最理想的浏览和阅读宽度而设定

理想视口,对设备来讲,是最理想的视口尺寸

需要手动添写meta视口标签通知浏览器操作

meta视口标签的主要目的:布局视口的宽度应该与理想视口的宽度一致,简单理解就是设备有多宽,我们布局的视口就多宽

最标准的viewport设置

视口宽度和设备保持一致

视口的默认缩放比例1.0

不允许用户自行缩放

最大允许的缩放比例1.0

最小允许的缩放比例1.0

ps:注意二倍图或者三倍图问题

流式布局,就是百分比布局,也称非固定像素布局。

通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充。

流式布局方式是移动web开发使用的比较常见的布局方式。

父盒子开启display:flex后,默认为不换行,所以使用flex-wrap:wrap;使其换行

使用justify-content: space-around; 使其子盒子主轴间距平均分配

使用align-content: space-around; 使其子盒子侧轴间距平均分配

方案1

①假设设计稿是750px

②假设我们把整个屏幕划分为15等份(划分标准不一可以是20份也可以是10等份)

③每一份作为html字体大小,这里就是50px

④那么在320px设备的时候,字体大小为320/15就是  21.33px

⑤用我们页面元素的大小除以不同的 html字体大小会发现他们比例还是相同的

⑥比如我们以750为标准设计稿

⑦一个100 100像素的页面元素在  750屏幕下,  就是 100/ 50  转换为rem  是  2rem 2rem  比例是1比1

⑧320屏幕下,  html字体大小为21.33  则 2rem=  42.66px  此时宽和高都是 42.66  但是宽和高的比例还是 1比1

⑨但是已经能实现不同屏幕下  页面元素盒子等比例缩放的效果

总结:

①最后的公式:页面元素的rem值 =  页面元素值(px) /  (屏幕宽度  /  划分的份数)

②屏幕宽度/划分的份数就是 htmlfont-size 的大小

③或者:页面元素的rem值 =  页面元素值(px) /  html font-size 字体大小

方案2

1.less+rem+媒体查询

2.lflexible.js+rem

响应式需要一个父级做为布局容器,来配合子级元素来实现变化效果。

原理就是在不同屏幕下,通过媒体查询来改变这个布局容器的大小,再改变里面子元素的排列方式和大小,从而实现不同屏幕下,看到不同的页面布局和样式变化。

父容器版心的尺寸划分

超小屏幕(手机,小于 768px):设置宽度为 100%

小屏幕(平板,大于等于 768px):设置宽度为 750px

中等屏幕(桌面显示器,大于等于 992px):宽度设置为 970px

大屏幕(大桌面显示器,大于等于 1200px):宽度设置为 1170px

但是我们也可以根据实际情况自己定义划分

直接拿Bootstrap 预先定义好的样式来使用

修改Bootstrap 原来的样式,注意权重问题

学好Bootstrap 的关键在于知道它定义了哪些样式,以及这些样式能实现什么样的效果

如何进行云主机迁移?看这一篇文章就够了!

欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~

本文由腾讯云计算产品团队发表于云+社区专栏

主机迁移概述

在云计算时代,不管是从IDC上云还是多云直接的迁移,都已经是常见的事宜。而在上云/迁移的方案中,也是有多种的方式能够将主机迁移到腾讯云中。

技术分享图片

然而,不同的方式会有不同的利弊。

技术分享图片

目前,腾讯云可以提供导入镜像和服务迁移(冷迁移)的工具,而这两种方式均涉及到镜像制作。故本文将分享镜像制作的操作步骤,仅供参考。

1、在制作镜像之前需要了解符合导入腾讯云的镜像文件要求,详情可参考导入镜像概述

技术分享图片

Linux 系统类型镜像限制

技术分享图片

Windows 系统类型镜像限制

2、接下来则依据操作系统的不同,选择不同的镜像制作方法。请分别参考官网文档Linux 镜像制作Windows 镜像制作

3、在制作镜像之前,需要在Linux操作系统里安装cloud-init,在Widows操作系统里安装cloud-base。相应的操作可以查看官网文档Linux 系统安装 cloud-initWindows 系统安装 cloud-base

4、镜像制作完毕之后,则需要将镜像上传至COS。

5、当镜像已经上传到COS之后,则可以利用【导入镜像】将自定义镜像导入到镜像控制台,然后再基于该自定义镜像创建CVM。或者利用【服务迁移】的功能,直接从COS拉取镜像并创建CVM。

技术分享图片

相应的操作指引,其实官网文档均已提供,而本文将作为实践的一些经验分享,供大家参考,希望对大家有帮助。

镜像制作

Linux和Windows镜像制作的完整步骤官网文档均已给出参考文档,这里补充两个信息。

1、如果是友商云主机,Linux系统的则可以使用qemu-img 命令或者 dd 命令来制作镜像;如果是Windows系统则可以使用disk2vhd工具来制作镜像。

2、如果是在本地IDC的虚拟机,可以使用虚拟化平台自带的一些镜像导出功能或者镜像制作工具来制作镜像。

3、如果是本地IDC的物理机,可是使用一些P2V的工具来制作或者参考1使用相关命令来制作。

友商云主机镜像制作(示例)

本示例是通过dd命令将某云主机制作成镜像,参考步骤如下。

0、制作镜像之前,请先在操作系统内安装cloud-init(Linux系统),详细操作方法参考第二部分介绍。

1、由于需要将云主机通过dd方式将整个操作系统盘备份到数据盘,所以需要给云主机挂一个约为系统盘2倍容量的数据盘(单独 购买的数据盘 需要先 挂载数据盘,然后格式化)。

2、一般云主机里面都有一些云厂商的agent或者服务,比如腾讯云的云监控、云安全的agent。当要把某云主机迁移到腾讯云时,应该把该云主机内特定的一些组件和服务卸载掉或者禁用掉。

3、使用 dd 命令制作镜像

dd if=/dev/vda of=/mnt/xxx_yun.raw bs=100M
请务必写成/dev/vda而不要写成/dev/vda1,否则dd出来的镜像分区表和mbr信息都丢了

4、使用qemu-img 命令将raw文件转换成qcow2文件,以可以节省传输和迁移的时间。

qemu-img convert -f raw -O qcow2 xxx_yun.raw xxx_yun.qcow2

5、将qcow2镜像文件上传到腾讯云COS

  • 安装coscmd工具,pip install coscmd(在某云主机上操作);
  • 创建bucket(在腾讯云控制台操作,示例melodytest01);
  • 使用命令将镜像上传至COS;
coscmd config -a <access_id> -s<secret_key> -u <appid> -b melodytest01 -r ap-beijing -m 10 -p 10
coscmd upload /mnt/xxx_yun.qcow2  xxx_yun.qcow2

6、 等待一段时间之后,登录腾讯云COS控制台则可以看到镜像已经成功从某友商云传到COS了。

vmware vsphere 导出镜像(参考)

技术分享图片

打开虚拟机的编辑设置界面

技术分享图片

vmdk磁盘文件路径

技术分享图片

这就是vmdk镜像文件了

cloud-init安装

关于Cloud-init和Cloud-base的安装,官网上也给出了参考文档。而Linux系统作为常用的系统,本文的实践示例则以Cloud-init为例。

cloud-init简单介绍

cloud-init 主要提供了一个实例首次初始化时的自定义配置的能力,如果导入的镜像没有安装cloud-init服务,通过该镜像启动的实例就不会被正常初始化,因此该镜像就会导入失败。因此再制作镜像之前应当在系统内安装cloud-init。

  • Cloud-Init 是一个用来自动配置虚拟机的初始设置(如主机名、网卡、用户名和密码等)的开源工具;常用于在创建虚拟机时通过元数据服务对虚拟机基本配置,即主要用于解决云计算场景下使用不同镜像创建子机初始化问题。
  • cloud-init仅仅在系统启动时运行,不会常驻系统;
  • 需要将cloud-init设置开机启动,且不能在首次开机启动后取消cloud-init的开机启动。虽然第一次开启启动,cloud-init运行了之后初始化正常了,然而考虑到后续用户有重置密码、修改ip、加载密钥等需求,仍需要依赖cloud-init,所以如果用户在cloud-init初始化之后就取消了其开机启动则会在用户重启系统之后,影响重置密码、修改ip、加载密钥等功能;
  • cloud-init每次启动的时候会根据预先配置好的数据源从metadata server 或 configDrive 里面拉取实例元数据对虚拟机进行初始化(该初始化操作只有在虚拟机首次启动时才会被执行),拉取userdata的信息执行用户自定义的脚本行为;
  • 当系统启动时,cloud-init 可完成包括但不限于下面的定制化工作:
    • 设置 default locale
    • 设置 hostname
    • 添加 ssh keys到 .ssh/authorized_keys
    • 设置用户密码
    • 配置网络
    • 安装软件包

cloud-init 安装 tips

cloud-init的安装其实还是挺简单的,最麻烦的是安装依赖包。不同操作系统的依赖包的依赖包的版本还不一样,如果是不能联网的情况下安装,更是一件麻烦的事情。详细步骤可以查看官网文档Linux 系统安装 cloud-init,而我在此则仅补充相关tips,希望对大家有帮助。

  • 直接通过apt-get 或 yum 命令安装的cloud-init 版本默认为当前操作系统配置的软件源里面默认的cloud-init版本,通常情况下和cloud-init 最新版本存会存在比较大的差异,使用这种方式安装的镜像创建出来的实例可能会存在部分配置项初始化不符合预期的情况,建议使用手工下载最新cloud-init源码包的方式进行安装。
  • 如果机器能联网,可直接运行命令进行安装依赖包,参考命令如下:
yum intstall -y python-setuptools python-jinja2 python-prettytable python2-oauthlib python-configobj PyYAML python-requests python-jsonpatch python-six
  • 如果机器不能联网,则可以找台与要制作镜像的机器同操作系统版本的可以联网的机器,然后新建一个requirement.txt,将需要安装的cloud-init的包都放进去requirement.txt,然后运行命令 pip download -d -r requirements.txt,这样全部的依赖包都会被下下来了,最后,再将这些包放入那台需要制作的机器即可。

技术分享图片

requirement.txt的截图

  • 最后,补充一份我实际测试时安装的依赖包,供参考:
certifi-2017.11.5
chardet-3.0.4
configobj-5.0.6
functools32-3.2.3-2
idna-2.6
Jinja2-2.10
jsonpatch-1.20
jsonpointer-1.14
jsonschema-2.6.0
MarkupSafe-1.0
oauthlib-2.0.6
prettytable-0.7.2
PyYAML-3.12
requests-2.18.4
setuptools-38.2.4
six-1.11.0
urllib3-1.22
rpm -qa | grep setuptools
rpm -qa | grep jinja2
rpm -qa | grep prettytable
rpm -qa | grep oauthlib
rpm -qa | grep configobj
rpm -qa | grep PyYAML
rpm -qa | grep requests
rpm -qa | grep jsonpatch
rpm -qa | grep jsonschema
rpm -qa | grep six
  • 如果没有安装好,在安装cloud-init的时候也会提示缺少某某依赖包,到时候按照要求再安装即可;
  • 需要安装的依赖包,其实都装cloud-init安装包的requirements.txt文件中定好了包括版本要求。cat /cloud-init-17.2/requirements.txt即可查看。

修改 cloud-init 配置文件 tips

  • 发现部分用户,安装好cloud-init之后就制作镜像了,上传到腾讯云之后,创建了CVM会发现一些异常,检查会发现,原来是没有按照官方要求进行cloud-init 配置文件的修改导致的。所以,这个步骤千万别漏了。很重要哈。
  • 官网上给出了ubuntut和centos的参考配置文件,直接下载,然后替换即可。

设置 cloud-init 服务开机自启动 tips

  • 这块的操作官网也给出了详细的文档说明,但是是以systemd 自启动服务管理为例。而实际上是需要根据当前操作系统使用的自启动服务管理方式是什么进行选择,如果选择出错则 cloud-init 服务无法开机自启动。
  • 比如,在我的测试中,则发现systemctl: command not found,我测试的操作系统版本则是用service命令来启动。

关于安装cloud-init后的操作

经常有些用户辛辛苦苦把镜像上传到cos了,到了导入镜像,半天过去导入失败了,才发现cloud-init的安装有问题。那么,如何可以确认我们安装的cloud-init是没问题的呢?下面的方法,供参考。

1、 运行cloud-init init —local

2、执行 ll /var/lib/cloud,正常会看到如下截图内容

技术分享图片

3、执行rm -rf /var/lib/cloud

4、重启你的服务器,正常情况下,每次重启都会成/var/lib/cloud

5、也可以执行cloud-init status看下状态是否正常。

将镜像导入COS

将镜像文件上传到COS,有多种工具可支持,详情可参考官网文档COS 用户工具,也可以使用控制台的方式将镜像上传至COS。由于操作较为简单,我就不再重复演示。

导入镜像功能使用

关于导入镜像的详细介绍可查看官网文档导入镜像概述,该功能需要开启白名单方可使用。相关操作演示如下,仅供参考。

1、登录镜像控制台,选择地域(请选择与存放镜像的COS的bucket同个地域),然后点击【导入镜像按钮】。

技术分享图片

2、阅读导入镜像的步骤,并且确认所有准备步骤已经完成。

技术分享图片

3、填写信息,并且开始导入。

  • 关于镜像文件URL:选择存储镜像的bucket,找到镜像文件,然后点击【文件信息】,在弹出来的框里面,把【源文件链接】的信息复制出来,就是镜像文件URL了

技术分享图片

技术分享图片

  • 关于地域,请选择Bucket(存放镜像文件的Bucket)所在的地域。其余的信息,如实按照镜像的实情填写即可。

技术分享图片

  • 关于导入方式,如果正常安装了cloud-init,则选择【正常】,否则请选择【强制】。

技术分享图片

补充,若非级特殊的情况无法安装cloud-init,否则请不要选择强制导入。强制导入的镜像,由于没有cloud-init,基于该镜像创建的CVM,无法初始化,需要再创建CVM之后,登录操作系统进行许多初始化操作,是一件较为麻烦的事情。

  • 最后,则是点击【开始导入】,等待一段时间之后,会有站内信通知导入的结果。由于没有进度条之类的信息,无法预估预计还需要多久才能有结果。期间可以登录操作日志控制台进行查看状态。

技术分享图片

技术分享图片

操作日志控制台

  • 镜像导入成功之后,则可以登录镜像控制台,找到已经成功导入的镜像,然后基于该镜像创建云主机。

技术分享图片

40.jpg

服务迁移工具使用

近期腾讯云也推出了新功能【服务迁移】,和【导入镜像】的功能的差异,简单描述如下。

1、导入镜像,只能导入系统盘,数据盘无法导入。而使用【云服务器迁移】功能,可以将系统盘和数据盘都导入到腾讯云。

2、导入功能,步骤是把存在COS的镜像导入到镜像控制台,然后再基于该镜像创建CVM;而云服务器迁移则是,直接从COS上拉取镜像文件,用该镜像置换一个已存在的CVM实例的系统盘,从而实现迁移。(同理,数据盘的迁移也是一个类似的过程。得先创建CVM或者CBS,再使用云服务器迁移的功能。)

离线实例迁移

技术分享图片

下面是相关操作步骤,仅供参考。

1、 点击【新建】按钮新建一个迁移任务

技术分享图片

2、了解迁入准备工作

技术分享图片

3、填写相关信息,开始迁移。

  • 填写任务名称
  • 填写COS链接,即镜像文件的COS链接,同导入镜像时需要填写的COS链接。
  • 选择需要迁入的云主机。正如我上面提到的,使用服务迁移的功能进行迁移,是需要预先创建一台CVM,然后将导入的镜像置换此台CVM的系统盘,从而完成迁移。

技术分享图片

4、等待迁移任务完成,可以在控制台中看到进度。

技术分享图片

5、迁移100%完成之后,用户则可以到云主机控制台找到刚刚迁入的云主机,重新开机启动即可。

离线数据迁移

离线数据迁移指的是迁移数据盘。数据盘也是可以制作成一个镜像,上传至COS,然后使用【离线数据迁移】的功能,将数据盘的镜像文件迁移到CBS中。相关步骤类似【离线实例迁移】。

技术分享图片

1、 点击【新建】按钮新建一个迁移任务

技术分享图片

2、了解迁入准备工作

技术分享图片

3、填写相关信息,开始迁移。

  • 填写任务名称
  • 填写COS链接,即镜像文件的COS链接,同导入镜像时需要填写的COS链接。
  • 选择需要迁入的云硬盘。正如我上面提到的,使用服务迁移的功能进行迁移,是需要预先创建一个CBS云盘,然后将导入的数据盘镜像置换该云盘,从而完成迁移。

技术分享图片

4、等待迁移任务完成,可以在控制台中看到进度。

技术分享图片

5、迁移100%完成之后,用户将此云盘挂载到云主机即可。

问答
CVM的默认DNS配置?
相关阅读
在 CentOS7.2 下 DIY 动手搭建一个 WordPress
基于混合集成学习算法的热迁移超时预测模型
低于0.01%的极致Crash率是怎么做到的?
【每日课程推荐】新加坡南洋理工大学博士,带你深度学习NLP技术

此文已由作者授权腾讯云+社区发布,更多原文请点击

搜索关注公众号「云加社区」,第一时间获取技术干货,关注后回复1024 送你一份技术课程大礼包!

海量技术实践经验,尽在云加社区







以上是关于最流行的四种移动端布局方式,看这一篇文章就够了的主要内容,如果未能解决你的问题,请参考以下文章

Handler看这一篇就够了

Handler看这一篇就够了

设置 matplotlib 正确显示中文的四种方式 看这一篇就够啦!

设置 matplotlib 正确显示中文的四种方式 看这一篇就够啦!

敏捷管理系列-学习实践Scrum,看这一篇就够了!

从3355到管理度量,学习实践Scrum,看这一篇就够了!| IDCF