文章目录

前言

一、PC端与移动端的区别

PC端:

移动端:

二、视口

布局视口

视觉视口

理想视口

meta视口标签

三、二倍图

四、移动端开发选择

单独制作移动端页面(主流)

响应式页面兼容移动端(其次)

总结



前言

        分享html移动端方面的基础知识


一、PC端与移动端的区别

PC端

浏览器多样化,需要考虑兼容性的问题,传统方式布局比较繁杂

移动端

移动端浏览器大部分内核为webkit,不需要考虑兼容性的问题,且移动端可以放心使用flex弹性布局

二、视口

        视口就是显示页面内容的屏幕区域,视口可以分为布局视口(layout viewport)、视觉视口(visual viewport)、理想视口(ideal viewport)

布局视口

  • 一般设备的浏览器默认设置了一个布局视口,用于解决早期的pc端页面在手机上显示的问题
  • ios,Android基本都将这个视口的分辨率设置为980px,所以pc上的网页大多都能在手机呈现,只不过元素看上去很小,一般默认可以通过手动缩放网页

视觉视口

  • 它是用户正在看到的网站区域
  • 我们可以通过缩放去操作视觉视口,但不会影响布局视口,布局时候仍然保持原来的宽度

理想视口

  • 为了使网站在移动端有最理想的浏览和阅读尺寸而设定
  • 需要手动添加meta视口标签通知浏览器操作
  • meta视口标签的主要目的就是设备有多宽,我们布局就多宽(相当于自适应)

meta视口标签

  • <meta name="viewport" content="width=device-width,initial-sacle=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0">
  • width = device-width表示视口的宽度和设备保持一致
  • initial-scale表示视口默认缩放比例是1.0
  • user-scalable表示不允许用户自行缩放
  • maximun-scale表示最大允许的缩放比例
  • minimum-scale表示最小允许的缩放比例

三、二倍图

  • 简单来说就是电脑屏幕的分辨率是物理分像素,比如高清屏1920*1080就是宽1920像素,高1080像素
  • 在网页中经常用到px单位就是逻辑像素,这个像素使我们设置的
  • 在pc端上,物理像素和逻辑像素比例1:1,而在移动端(iphone6/7/8环境)上物理像素和逻辑像素是2:1
  • 就相当于pc端的布局在移动端上会被放大两倍,比如pc端一张50*50的图片在移动端环境下,会放大两倍,就变成100*100,导致图片清晰度下降。而如果放一张100*100的图片,设置宽高为50*50像素,再转到移动端后放大两倍,图片清晰度就不会下降,因为图片本身是100*100像素的
  • 在其他情况下也有多倍图,2.6倍,3倍图等,只不过二倍图比较多一些

四、移动端开发选择

单独制作移动端页面(主流)

  • 通过判断设备,如果是移动端设备打开,就跳转到移动端页面上
  • 流式布局方式(百分比布局)
  • flex弹性布局
  • less+rem+媒体查询布局
  • 混合布局

响应式页面兼容移动端(其次)

  • 通过判断屏幕来改变样式,以适用不同终端。但是制作麻烦,需要花费很大精力去调兼容性问题
  • 媒体查询布局
  • bootstrap框架

总结

以上就是讲解了html移动端方面的基本知识