成都网站建设设计

将想法与焦点和您一起共享

移动端布局

一、移动端和pc端布局的不同
1.显示设备(屏幕)
2.操作(鼠标、指尖)
3.浏览器内核:移动端不用考虑ie,但是各种浏览器内核(手机自带)、微信浏览器内核
4.运行设备 移动设备(轻便、迅速、便携) pc端(体验)
5.网络不同 移动4g(注重速度) pc光纤(注重体验速度)
页面设置不同:
1.Meta标签设置
2.单位=======用来适应不同的移动端屏幕尺寸;

为阎良等地区用户提供了全套网页设计制作服务,及阎良网站建设行业解决方案。主营业务为网站制作、网站建设、阎良网站设计,以传统方式定制建设网站,并提供域名空间备案等一条龙服务,秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求,就会得到认可,从而选择与我们长期合作。这样,我们也可以走得更远!

Px像素。类似绝对单位。其实也是相对单位,相对于屏幕的分辨率;
Pt磅 点 打印的尺寸
Em 相对单位,相对于父级的font-size 1em=父级的font-size(直接的父级)
Rem相对单位,相对于根元素的font-size 1rem=根元素的font-size
Vw,vh相对单位,相对于屏幕的宽度和高度,1vw==1%屏幕的宽度
 

width=device-width:宽度等于当前设备的宽度
intial-scale:页面首次被显示是可视区域的缩放比例,取值1.0则页面按实际尺寸显示,无任何缩放
maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别,
maximum-scale用户可将页面放大的程序,1.0将禁止用户放大到实际尺寸之上。
user-scalable:是否可对页面进行缩放,no 禁止缩放

二、Meta标签的设置不同及其不同的效果(扩展)
1.强制让文档与设备的宽度保持1:1

2.忽略页面中的数字识别为电话号码
3.忽略页面中的邮箱格式为邮箱

4.    

手动刷新

三、Js方法获取HTMLfontsize(自动刷新)


文章题目:移动端布局
文章源于:http://chengdu.cdxwcx.cn/article/goepgd.html