javascript制作移动电商首页的交互完整代码移动端html

转载

文章目录

前言

一、PC端与移动端的区别

PC端：

移动端：

二、视口

布局视口

视觉视口

理想视口

meta视口标签

三、二倍图

四、移动端开发选择

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

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

总结

前言

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

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

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

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

<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倍图等，只不过二倍图比较多一些