移动布局移动端基础

2020年6月16日作者张舫

1.1浏览器现状

pc端常见浏览器

360浏览器
谷歌浏览器
火狐浏览器
qq浏览器
百度浏览器
搜狗浏览器
iE浏览器

移动端常见浏览器

UC浏览器
qq浏览器
欧朋浏览器
百度手机浏览器
360浏览器
谷歌浏览器

国内的浏览器大部分都是根据webkit内核修改的,国内尚无自主研发手机浏览器内核,

1.2手机屏幕现状

移动端屏幕尺寸非常多,碎片化严重
Android设备有多种分辨率 480×800 480×854 等
iphone的碎片化也加剧主要分辨率有 640×960 640×1136等
作为开发者无需关注这些分辨率,因为我们常用的单位尺寸为px

1.3常见移动端屏幕尺寸

数据来源https://material.io/devices/

1.4移动端调试方法

chrome devTools (谷歌浏览器)的手机模拟调试
搭建本地web服务器,手机和服务器一个局域网内,通过手机访问服务器
使用外网服务器,直接ip或域名访问

视口

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

2.1布局视口layout viewport

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

2.2 视觉视口 visual viewport

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

2.3理想视口 ideal viewport

为了使网站在移动端有最理想的浏览和阅读宽度设定
理想视口,对设备来讲是最理想的视口尺寸
需要手动写meta视口标签通知浏览器操作
meta视口标签的只要目的:布局视口的宽度应该与理想视口宽度一致,简单理解就是设备有宽,我们的布局视口就多宽

2.4meta视口标签

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

1	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

width 将viewport(视口)宽度设置为device-width(理想宽度)
user-scalable 将用户缩放设置为no
initial-scale 将初始缩放比这只为1 或设置大于0的数值
maximum-scale 将放大比率设置为1 或设置大于0的数值
minimum-scale 将缩小比率设置为 1 或设置大于0的数值

3多倍图

对于一张50px*50px的图片,在手机Tetina屏幕中打开,按照刚才的物理像素会被放大倍数,这样会造成图片模糊
在标准的viewport设置中,使用倍图来提高图片质量,解决在高清设备中的模糊问题

img{
    /*原始图片50px*/
    width: 50px;
    height: 50px;
}
.box{
    /*原始图片50px*/
    background-size:50px 50px ;
}

img{

/*原始图片50px*/

width: 50px;

height: 50px;

}

.box{

/*原始图片50px*/

background-size:50px 50px ;

}

background-size 参数详解

/*完全覆盖div 部分图片显示不全*/
background-size: cover;
/*等比例拉伸, 宽度 或 高度 , 部分留白*/
background-size: contain;

/*完全覆盖div 部分图片显示不全*/

background-size: cover;

/*等比例拉伸, 宽度或高度 , 部分留白*/

background-size: contain;

多倍切图工具

4移动主流解决方案

单独制作移动端页面
- 流式布局(百分比布局)
- fiex 弹性盒子布局(强烈推荐)
- less+rem+媒体查询布局
- 混合布局
响应式页面兼容移动端(其次)
- bootstarp

4.1单独制作移动端页面CSS初始化

推荐使用normailze.css
保护了有价值的默认值
修复了浏览器的bug
是模块化的
具有详细的文档

http:necolas.github.io/normalize.css

5css盒子模型

传统模式宽度计算:盒子的宽度 = css中设置的width +border +padding
css3盒子模型 :盒子的宽度 = css中设置的width , 盒子不会被padding和border撑大

如何选择盒子?

移动端可以全部使用css3盒子模型
pc端如果要完全兼容,我们就用传统模式,如果不考虑兼容我们就选择css3盒子模型

特殊样式设置

/*设置为css3盒子模型*/
box-sizing: border-box;
-webkit-box-sizing: border-box;

/*取消点击高亮*/
-webkit-tap-highlight-color: transparent;
/*在ios上加上这个属性才能给 ,按钮输,入框,定义样式, 因为ios有自定义样式*/
-webkit-appearance: none;
/*长按弹出菜单, 如图长按保存 链接长按复制链接等等*/
-webkit-touch-callout: none;

/*设置为css3盒子模型*/

box-sizing: border-box;

-webkit-box-sizing: border-box;

/*取消点击高亮*/

-webkit-tap-highlight-color: transparent;

/*在ios上加上这个属性才能给 ,按钮输,入框,定义样式, 因为ios有自定义样式*/

-webkit-appearance: none;

/*长按弹出菜单, 如图长按保存链接长按复制链接等等*/

-webkit-touch-callout: none;

如何使用二倍精灵图做法

把精灵图等比例缩放2倍,之后根据坐标测量位置,位置也会缩小2倍
注意backgrount-size也要写:精灵图原来的一半

6.1流式布局(百分比布局)起手式案例

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!--  从 http://necolas.github.io/normalize.css/ 这下载即可 -->
    <link rel="stylesheet" href="./normalize.css">
    <style>
        body{
            width: 100%;
            min-width: 320px;
            max-width: 1080px;
            margin: 0 auto;
            font-family: -apple-system, Helvetica, sans-serif;
            font-size: 14px;
            line-height: 1.5;
            color: #666666;
        }
    </style>
</head>
<body>

</body>
</html>

<!doctype html>

<head>

<title>Document</title>

<style>

body{

width: 100%;

min-width: 320px;

max-width: 1080px;

margin: 0 auto;

font-family: -apple-system, Helvetica, sans-serif;

font-size: 14px;

line-height: 1.5;

color: #666666;

}

</style>

</head>

<body>

</body>

</html>

关于作者

张舫

好好学习天天向上