网络编程(七）移动端布局(1)

2021-05-21  本文已影响0人  blackmanba_084b

pink老师移动端布局还有最后一小部分，坚持下，很快就能把网页端及移动端布局学完了。
这篇博客主要讲述的是移动端布局。

一、移动端基础

1.1 浏览器基础

国内的UC和QQ，百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自主研发的内核，就像国内的手机操作系统都是基于Android修改开发的一样。兼容移动端主流浏览器，处理Webkit内核浏览器即可。

1.2 手机屏幕现状
1.3 常见移动端屏幕尺寸
1.4 移动端调试方法
1.5 总结

二、 视口

视口（viewport）就是浏览器显示页面内容的屏幕区域。 视口可以分为布局视口、视觉视口和理想视口

2.1 布局视口（layout viewport）
2.2 视觉视口（visual viewport）
2.3 理想视口(ideal viewpor)
2.4 meta视口标签
<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特殊值
initial-scale 初始缩放比，大于0的数字
maximum-scale 最大缩放比，大于0的数字
minimum-scale 最小缩放比，大于0的数字
user-scalable 用户是否可以缩放，yes或no（1或0）

2.5 标准的viewport设置

三、 二倍图

3.1 物理像素&物理像素比
 /* 在 iphone8 下面 */
 img{
 /*原始图片100*100px*/
 width: 50px;
 height: 50px;
 } 
.box{
 /*原始图片100*100px*/
 background-size: 50px 50px;
 }
3.2 背景缩放

background-size 属性规定背景图像的尺寸

<!--如果只写一个参数 另一个参数等比例缩放-->
background-size: 背景图片宽度 背景图片高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 500px;
            height: 500px;
            border: 2px solid red;
            background: url(images/dog.jpg) no-repeat;
            /* background-size: 图片的宽度 图片的高度; */
            /* background-size: 500px 200px; */
            /* 1.只写一个参数 肯定是宽度 高度省略了  会等比例缩放 */
            /* background-size: 500px; */
            /* 2. 里面的单位可以跟%  相对于父盒子来说的 */
            /* background-size: 50%; */
            /* 3. cover 等比例拉伸 要完全覆盖div盒子  可能有部分背景图片显示不全 */
            /* background-size: cover; */
            /* 4. contain 高度和宽度等比例拉伸 当宽度 或者高度 铺满div盒子就不再进行拉伸了 可能有部分空白区域 */
            background-size: contain;
        }
    </style>
</head>

<body>
    <div></div>
    <p></p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        /* 1. 我们有一个 50 * 50的盒子需要一个背景图片，但是根据分析这个图片还是要准备2倍， 100*100 */
        /* 2. 我们需要把这个图片缩放一半，也就是 50*50  background-size*/
        
        div {
            width: 50px;
            height: 50px;
            border: 1px solid red;
            background: url(images/apple100.jpg) no-repeat;
            background-size: 50px 50px;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

四、 移动端开发选择

4.1

a. 单独制作移动端页面（主流)
京东商城手机版
淘宝触屏版
苏宁易购手机版
b.响应式页面兼容移动端（其次)
三星手机官网

4.2 单独移动端页面（主流）

通常情况下，网址域名前面加 m(mobile) 可以打开移动端。通过判断设备，如果是移动设备打开，则跳到移动端页面。

4.3 响应式兼容PC移动端

三星电子官网： www.samsung.com/cn/ ，通过判断屏幕宽度来改变样式，以适应不同终端
缺点：制作麻烦， 需要花很大精力去调兼容性问题

4.4 总结

现在市场常见的移动端开发有 单独制作移动端页面 和 响应式页面 两种方案;现在市场主流的选择还是单独制作移动端页面

五、 移动端技术解决方案

5.1 移动端浏览器

移动端浏览器基本以 webkit 内核为主，因此我们就考虑webkit兼容性问题。我们可以放心使用 H5 标签和 CSS3 样式。同时我们浏览器的私有前缀我们只需要考虑添加 webkit 即可。


5.2 CSS初始化 normalize.css

移动端 CSS 初始化推荐使用 normalize.css/

5.3 CSS3 盒子模型 box-sizing
 /*CSS3盒子模型*/
 box-sizing: border-box;
 /*传统盒子模型*/
 box-sizing: content-box;

移动端可以全部CSS3 盒子模型PC端如果完全需要兼容，我们就用传统模式，如果不考虑兼容性，我们就选择 CSS3 盒子模型

5.4 特殊样式
/*CSS3盒子模型*/
 box-sizing: border-box;
 -webkit-box-sizing: border-box;
 /*点击高亮我们需要清除清除 设置为transparent 完成透明*/
 -webkit-tap-highlight-color: transparent;
 /*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
 -webkit-appearance: none;
 /*禁用长按页面时的弹出菜单*/
 img,a { -webkit-touch-callout: none; }

六、 移动端页面布局

6.1 移动端技术选型
6.2 流式布局（百分比布局）
上一篇 下一篇

猜你喜欢

热点阅读