移动端web开发

最新推荐文章于 2023-02-12 19:04:09 发布

Ukashi

最新推荐文章于 2023-02-12 19:04:09 发布

阅读量409

点赞数

文章标签： html html5 css

本文链接：https://blog.csdn.net/weixin_51155543/article/details/119957238

版权

本文介绍了移动端基础，包括视口、meta视口标签和多倍图的概念，详细讲解了流式布局、flex布局、rem适配布局以及响应式布局的原理和应用案例。同时，探讨了浏览器兼容性问题，如防止Android邮箱识别和iOS点击高亮，并关注性能优化。此外，还提到了Bootstrap栅格系统在响应式设计中的作用。

摘要由CSDN通过智能技术生成

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

一、移动端基础

视口：浏览器显示页面的屏幕区域
布局视口：网页的宽度
视觉视口：移动端设备浏览器窗口的宽度
理想视口：对设备来说最理想的视口尺寸，布局视口的大小和屏幕的大小一样

布局视口

在这里插入图片描述

视觉视口

在这里插入图片描述

理想布局

meta视口标签
是设置理想视口的重要元素，主要用于将布局视口的尺寸和理想视口的尺寸相匹配。

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

在这里插入图片描述

width=device-width：将布局视口的宽度设置为理想视口的宽度
initial-scale=1.0 ：缩放系数 = 理想视口宽度 / 视觉视口宽度

多倍图

物理像素：设备像素，屏幕的最小物理单位
例如：主屏分辨率为 1136 x 640 像素，可以理解为它竖边有1136个格子，横边有640个格子

物理像素比：物理像素比（屏幕像素比）是指1px能显示的物理像素点的个数。
在PC端页面，1px等于1个物理像素；但在移动端，1px不一定等于1个物理像素

图片像素：虚拟像素，图片色块

Retina（视网膜屏幕）：将更多的物理像素压缩在一块屏幕里，物理像素越高，屏幕显示越清晰

在这里插入图片描述

情景：200 x 200 像素图片，设置宽高为200px，放入400 x 400 分辨率屏幕中

问题：图片变模糊了

解决：多倍图
大图小用，采用400 x 400 像素的图片代替原来的200像素

css3盒模型
CSS3 中新增 box-sizing 属性，可以设置盒模型类型
属性值：content-box、border-box

border-box：设置的边框和内边距的值是包含在width内的，不包括margin
content-box：标准盒子模型。 width 与 height 只包括内容的宽和高

normalize.css
normalize.css 是一个可以定制的CSS文件，它让不同的浏览器在渲染网页元素的时候形式更统一

特点：

保留有用的默认值，不同于许多 CSS 的重置

标准化的样式，适用范围广的元素

纠正错误和常见的浏览器的不一致性

一些细微的改进，提高了易用性。

使用详细的注释来解释代码。

下载地址

二、常见布局

1.流式布局

案例：京东

流式布局原理

流式布局也称百分比布局，通常设置元素宽度为百分百自适应页面大小，高度固定

布局结构

满屏布局
左侧固定，右侧自适应
右侧固定，左侧自适应
两侧固定，中间自适应（圣杯布局，双飞翼布局）
等分布局

2.flex布局

案例：携程

flex布局原理

所有元素都可以使用flex布局，为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。
使用flex布局的元素被称为容器，其子元素成为项目

flex布局父项常见属性

flex-drection

用于确定主轴（x或y轴 / 行或列）
属性值： row，column，row-reverse（从右到左），column-reverse（从下到上）

justify-content

用于布局主轴子元素的排列方式
属性值：center，space-around，space-between，flex-start
，flex-end

flex-wrap

用于设置子元素是否换行
属性值：wrap，nowrap

align-items

用于设置侧轴的子元素的排列方式（单行）
属性值：center，flex-start，flex-end，stretch，baseline（项目的第一行文字的基线对齐）

align-content

用于设置侧轴元素的排列方式（多行）
属性值：center，space-around，space-between，flex-start，flex-end，stretch

flex-flow

复合属性，相当于设置了flex-drection和flex-wrap

flex布局子项常见属性

flex （flex-shrink，flex-basis，flex-grow）

定义子项目分配剩余空间，用flex来表示占多少份数。

align-self

align-self属性可覆盖align-items属性，默认值为auto，表示继承父元素align-items属性，如果没有父元素，则等同于strech，可以使单个项目的排列方式和其它项目不同
属性值：flex-start，flex-end，center，baseline，stretch

order

定义项目的排列顺序
数值越小，越靠前，默认值为0

flex详解

3.rem适配布局

案例：苏宁

rem
rem是一个相对单位，类似与em（em是父元素的字体大小）
rem的基准是相当于html元素的字体大小

媒体查询
css3新语法
使用@media查询可以对不同的媒体类型定义不同的样式。即可以针对不同的屏幕设置不同的样式

语法

        //语法格式
        @media mediaType and|not|only (media featrue) {
            css-code;   
        }

用@media开头

media Type：媒体类型：all（用于所有设备），print（用于打印机和打印预览），screen（用于电脑屏幕，手机等）

关键字：and（将多个媒体连接在一起），not（排除某个媒体类型），only（指定某个特定的媒体类型）

media feature：媒体特性，加括号
eg： width（输出设备的页面可见区域宽度），min-width，max-width

引入资源

针对不同的屏幕引入不同的样式

 <link rel="stylesheet" href="" media="mediaType" and|not|only (media feature)>

Less
Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。

Less插件：easy less（visual code），编译less文件

Less嵌套：内层选择器没有&，会被解析为父元素的后代，否则为父元素的伪类或自身

Less运算：任何数值，颜色，变量都可以参与运算（加减乘除）
注意
1.运算符左右需要间隔一个空格
2.两个数参与运算，一个有单位，一个没有单位，结果以该单位为准
3.两个数参与运算，双方都有不同单位，结果以第一个单位为准

官方网站

cssrem插件

可以进行px和rem的转换

适配方案

1.媒体查询，less：计算不同屏幕的媒体查询
2.flexible.js：将屏幕划分为10等份，省去写不同屏幕的媒体查询

下载地址

4.响应式布局

Bootstrap
是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。

使用：1.创建文件夹
2.Bootstrap中html基本骨架 下载链接
3.引入相关样式
4.写内容

栅格系统
将页面布局分割为等宽的尺寸，通过列数来定义模块化页面布局
Bootstrap中提供的栅格系统，自动分为最多12列

布局容器container

.container类可以实现固定的宽度并居中呈现

container-fluid类
流式布局容器，百分百宽度，占据全部视口的容器（适用于单独做移动开发）

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局

"行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，行(.row)是列(.col-*)的横向组合和父容器(它们有效组织在.row下)

通过“行（row）”在水平方向创建一组“列（col-*)"

在“列（col-*）”中创建内容

Bootstrap的网格系统在各种屏幕和设备上的细节约定：

在这里插入图片描述

使用

例：class="col-lg-4 col-md-2 "
添加类，大屏下占4列，中屏下占2列

列嵌套
栅格系统内置的栅格系统内容将再次嵌套，即一个列又划分成若干个小列，添加一个新的.row元素和.col-*，形成嵌套

列偏移
使用 .col-# -offset-#可以将列向右偏移，即为当前元素添加左侧边距

列排序
改变列的顺序：.col-#-push-#，.col-#-pull-#