当前位置： 首页 > news >正文

手机html端 悬浮_移动端WEB开发 — 响应式布局

news 来源：原创 2024/9/23 16:04:28

前言、移动端技术选型

单独制作移动端页面 (主流)

• 流式布局 (百分比布局)
• flex弹性布局 (强烈推荐)
• less + rem + 媒体查询布局
• 混合布局

响应式页面兼容移动端 (其次)

• 媒体查询
• bootstrap

欣赏一下响应式网站

移动web是一个独立的站点，HTML、CSS、JS都是与PC网站独立的。唯一和PC网站有关系的就是数据。

3e2d1a65c704892ff2f580bd8cc0ae18.png

当用户用手机输入http://www.sohu.com的时候，由于的你上行HTTP请求中，有User-Agent标记，所以后台工程师可以写代码检测设备是什么，进行相应的跳转。

0383526656192573a4afd861e42b245d.png

所谓的响应式网站，responsive web design（RWD），指的是根据用户浏览器的视口宽度不同，来由不同的版心。这样的话，大屏幕用户感觉自己的屏幕被撑满了，网站大气，能够看见更多的内容。小屏幕用户，不会出现横向滚动条。

国外有一个网站，专门收集了全球各地的比较漂亮的响应式网站：http://mediaqueri.es/

一、响应式开发原理

就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的

55485bcce08669349927e499b6571451.png

响应式布局容器

601cb37208bd9cd72076edde165fe79d.png

二、BootStrap 开发框架

中文官网：http://www.bootcss.com/ 官网：http://getbootstrap.com/

BootStrap可以称为“框架”，和jQuery不同，它不仅仅是js，而且还是css。网站中的所有东西，比如标签（标签的类名不能随便起了）、CSS、js都是建筑在这个bootstrap上的。所以称为“框架”。

BootStrap 优点

a) 标准化的 html+css编码规范 b) 提供一套简洁、直观、强悍的组件 c) 有自己的生态圈，不断的更新迭代 d) 让开发更简单，提高开发效率

BootStrap 版本

a53e549b452d46a189dede85f4eea821.png

BootStrap 的使用

154e0c0d0d4a0257ff78c5fb1af8f0ba.png

1cd1eea7a8f4b4da0cef6ff95f335e1a.png

a9af9b4bc3ea36209065348882bc9aba.png

1611c60428182623c44924e0a4f27518.png

2.1 BootStrap 布局容器

BootStrap中需要为页面和栅格系统包裹一个 .container 的容器，它提供了两个↔此处的类，自己有4段的响应式变化：

b7a8a99440be2ced1d51b93522d0629f.png

2.1.1 栅格系统简介

3f9bc64bea95e12d65fe62e930a00530.png

2.1.2 栅格系统参数

e25cfb3c70cc3bbd2c035dc942970b72.png

2.1.3 列嵌套

74fc64404599be843108d3ec763fc412.png

2.1.4 列偏移

c8c3d339fd5d32e17815dff2fcda855f.png

2.1.5 列排序

9dbf61d039c0752f8ff502f5a738a65d.png

2.1.6 响应式工具

98f06ce26aa69d304895092f594ab8cd.png

BootStrap 其他 （按钮、表单、表格） 请参考 BootStrap 文档

移动端主流方案

单独制作移动端页面 (主流)

• 京东商城手机版
• 淘宝触屏版
• 苏宁易购手机版
• 携程网手机版
• ……

响应式页面兼容移动端 (其次)

• 三星手机官网
• ……

移动端技术选型

移动端技术选型

• 流式布局 (百分比布局)
• flex弹性布局 (推荐)
• less + rem + 媒体查询布局 (推荐)
• 响应式布局

建议：我们选取一种主要技术选型，其它作为技术辅助，这种混合技术开发

相关文章：

  • 北京网站建设多少钱？
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • ransac算法_【干货】计算机科学中最重要的32个算法 你知道几个？
  • 超轻量级全文搜索框架的设计和实现 (1)
  • 免费的UML建模工具StarUml
  • 游戏设计与开发_上海游戏开发设计培训班制作属于自已的游戏
  • QReader阅读中文文本乱码的解决
  • python数据归一化代码_python 实现对数据集的归一化的方法
  • 《Solaris 红宝书》系列在线课程
  • FCIP基础
  • rs232接口引脚定义_电子设计 | 串口，UART，RS232之间的区别
  • mysql 列合并_第14期：数据页合并
  • ASP.NET之父Scott Guthrie，1月13日做客微软北京.NET俱乐部
  • mysql 统计_分享一个实用的mysql数据库表概要信息统计sql，值得收藏
  • Compile qt-2.3.10
  • python中readlines()_在Python中，read（）或readlines（）更快吗？
  • 递归下降分析程序的设计与实现_算法讲解之递归算法
  • Android框架之Volley
  • Centos6.8 使用rpm安装mysql5.7
  • Docker: 容器互访的三种方式
  • SpringCloud（第 039 篇）链接Mysql数据库,通过JpaRepository编写数据库访问
  • 分类模型——Logistics Regression
  • 基于Dubbo+ZooKeeper的分布式服务的实现
  • 如何学习JavaEE,项目又该如何做？
  • 通信类
  • 验证码识别技术——15分钟带你突破各种复杂不定长验证码
  •  一套莫尔斯电报听写、翻译系统
  • d²y/dx²； 偏导数问题 请问f1 f2是什么意思
  • const的用法,特别是用在函数前面与后面的区别
  • Nginx实现动静分离
  • ​补​充​经​纬​恒​润​一​面​
  • #pragma once与条件编译
  • #pragma预处理命令
  • #QT(串口助手-界面)
  • （03）光刻——半导体电路的绘制
  • （51单片机）第五章-A/D和D/A工作原理-A/D
  • （C语言）求出1,2,5三个数不同个数组合为100的组合个数
  • (LLM) 很笨
  • （Redis使用系列） Springboot 使用Redis+Session实现Session共享 ，简单的单点登录 五
  • （不用互三）AI绘画：科技赋能艺术的崭新时代
  • （动手学习深度学习）第13章 计算机视觉---微调
  • （六）vue-router+UI组件库
  • （算法）Travel Information Center
  • （学习日记）2024.04.04：UCOSIII第三十二节：计数信号量实验
  • （转）mysql使用Navicat 导出和导入数据库
  • .bat批处理（二）：%0 %1——给批处理脚本传递参数
  • .NET Compact Framework 3.5 支持 WCF 的子集
  • .net core Redis 使用有序集合实现延迟队列
  • .NET I/O 学习笔记：对文件和目录进行解压缩操作
  • .Net Memory Profiler的使用举例
  • .NET 反射 Reflect
  • .NET 某和OA办公系统全局绕过漏洞分析
  • .NET 中 GetProcess 相关方法的性能
  • .NETCORE 开发登录接口MFA谷歌多因子身份验证
  • .Net通用分页类(存储过程分页版,可以选择页码的显示样式,且有中英选择)
  • 。。。。。
  • @antv/x6 利用interacting方法来设置禁止结点移动的方法实现。