移动端web开发--开发选择、技术解决方案、常见布局

最新推荐文章于 2024-04-16 18:42:05 发布

shirlyran

最新推荐文章于 2024-04-16 18:42:05 发布

阅读量462

点赞数 1

本文链接：https://blog.csdn.net/shirlyran/article/details/107257880

版权

1.移动端开发选择

1.1 移动端主流方案

1.单独制作移动端页面（主流）

2.响应式页面兼容移动端（其次）

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

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

1.3响应式兼容PC移动端

通过判断屏幕宽度来改变样式，以适应不同终端。如：三星官网

缺点：制作麻烦，需要花大量精力去调兼容性问题

2.移动端技术解决方案

2.1移动端浏览器

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

2.2CSS初始化 normalize.css

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

官网地址：http://necolas.github.io/normalize.css/

2.3CSS3盒子模型 box-sizing

传统模式宽度计算：盒子宽度=css中设置的width+border+padding
css3盒子模型：盒子宽度=css中设置的宽度width里面包含了border和padding，也就是说，我们的css3中的盒子模型，padding和border不会撑大盒子了。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            /* 有了box-sizing: border-box;这句话，就让盒子变成了CSS3盒子模型 */
            /* box-sizing: content-box; 加这句话就是传统盒子  */
            box-sizing: border-box;
            width: 200px;
            height: 200px;
            background-color: #16ccec;
            padding: 10px;
        }
    </style>
</head>

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

怎么选择：

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

2.4特殊样式

3.移动端常见布局

移动端技术选型

1.单独制作移动端页面（主流）

流式布局（百分比布局）
参考某东移动端首页
flex弹性布局（推荐）
参考携某移动端首页
less+rem+媒体查询布局
参考某宁移动端首页
混合布局

2.响应式页面兼容移动端（其次）

媒体查询
bootstarp
参考某里百秀移动端首页

3.1流式布局（百分比布局）

流式布局，就是百分比布局，也称非固定像素布局。
通过盒子的宽度设置成百分比来根据屏幕的宽度进行伸缩，不收固定像素的限制，内容向两侧填充。
流逝布局方式是移动web开发使用的比较常见的布局方式
设置最大宽度max-width和最小宽度min-width

shirlyran

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
移动端web开发--开发选择、技术解决方案、常见布局

1.移动端开发选择1.1 移动端主流方案1.单独制作移动端页面（主流）2.响应式页面兼容移动端（其次）1.2单独移动端页面（主流）通畅在网址域名前加m(mobile)可以打开移动端。通过判断设备，如果是移动设备打开，则跳到移动端页面。1.3响应式兼容PC移动端通过判断屏幕宽度来改变样式，以适应不同终端。如：三星官网缺点：制作麻烦，需要花大量精力去调兼容性问题2.移动端技术解决方案2.1移动端浏览器移动端浏览器基本以webkit内核为主，因此我们就考虑webkit
复制链接

扫一扫