您好,欢迎访问代理记账网站
  • 价格透明
  • 信息保密
  • 进度掌控
  • 售后无忧

移动端布局

准备工作:设置meta标签;

<meta name="format-dtection" content="telephone=no"/>

视口的设置:

utf-8 国际编码 charest 编码

viewport 适口 ,所能看到的范围,

width=device-width 宽度等于屏幕宽度;

initial-scale:缩放比例1

minimun-scale:最小比例;

maximun-scale:最大比例;

user-scalable:用户是否可以手动缩放;

dpr设备像素比=设备像素/逻辑像素(rtina屏的手机上,dpr为2,1个像素相当与2个物理像素);

rem 相对单位 相对于html根元素 font-size进行计算的;

推算思路;

1、写网页都是px像素单位,px是固定不变的。

2、移动端切换的时候,宽高大小不一样。

3、网页中有一个盒子(2rem),html字体默认大小为16px

4、改变每一个移动端的html{font-size}的值,

计算公式:dpr=物理像素/逻辑像素

dpr表示物理像素比;

物理像素表示ui设计图量出来的大小;

逻辑像素表示前端需要设置的css样式的大小;

常见的设计图的dpr的大小:“640px的设计图dpr为2,750px的设计图dpr为2,1080px的设计图dpr为3;

rem=逻辑像素/font-size;

总结:当设计图为640px的时候,dpr为2,计算方式为 物理像素/dpr/当前html字体大小的值;

苹果5 默认字体大小12px;

苹果6、7、8默认字体大小为14px;

苹果plus默认字体大小为16px;

移动端第一种布局方式:媒体查询+rem单位实现

优点:简单好理解;

缺点:计算麻烦,有多个设备要写多个媒体查询;

第二种移动端布局方式:

vw单位(viewport width);

关于vw单位的理解:视口宽度 1vw=浏览器视口的百分之一;

100vw是否等于100%?

浏览器横向有滚动条的时候不等于;

没有滚动条的时候等于;

推算思路:100vw可以看成100%width;

ui设计图:1vw=设计图的1%;

设备像素比=物理像素比/逻辑像素比;

1、设计图是640px dpr为2(默认)

640px/2=100vw;

320px=100vw;

1vw=3.2px;

1px=0.3125vw;

2、设计图是750px dpr为2(默认)

750px/2=100vw;

375px=100vw;

1vw=3.75px;

1px=0.2667vw;

总结:当设计图是640px的html ,字体大小为0.3125vw;

当设计图是750px的html,字体大小为0.2667vw;
优点:简单;

缺点:无


分享:

低价透明

统一报价,无隐形消费

金牌服务

一对一专属顾问7*24小时金牌服务

信息保密

个人信息安全有保障

售后无忧

服务出问题客服经理全程跟进