移动web开发

m0_75048134

已于 2024-08-01 21:09:09 修改

阅读量222

点赞数 1

文章标签： html 前端

于 2024-07-25 16:42:36 首次发布

本文链接：https://blog.csdn.net/m0_75048134/article/details/140691641

版权

视口

布局视口

pc端的显示缩小在移动端

视觉视口

用户看到的网站区域（看到局部pc网站）

理想视口

pc在移动端理想阅读宽度

meta视口标签

二倍图

我们准备的图片比需要的大两倍

再压缩回去

就不会模糊了

背景缩放background-size

移动开发端的选择

单独移动端页面（主流）

响应式兼容pc移动端

移动端技术解决方案

css3初始化normalize.css

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

移动端常见布局

单独移动端页面（主流）

流式布局（百分比布局）

max-width/min-width

24.7.26

二倍精灵图做法（缩放定位）

flex布局（不需要清除浮动）

display：flex；

对父元素设置的属性

flex-direction主轴排列

justify-content设置主轴上的子元素排列方式

flex-wrap设置子元素是否换行

装不下会缩小子元素宽度

align-items设置侧轴子元素排列方式（单行）

align-content设置侧轴子元素排列方式（多行）

出现换行才用

flex-flow

flex布局子项常见属性

flex属性

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

align-self控制子项自己在侧轴的排列方式

24.7.27

order属性定义排列顺序

默认是0，-1小所以在前面

背景线性渐变

移动微博web开发之rem适配布局

媒体查询

mediatype查询类型

关键字

媒体特性

24.7.28 引入资源（引入不同css文件）

less基础

伪元素写法

less运算

注意：

rem适配方案

24.7.29做案例了

引入滑动图片插件p485

24.7.30

如何上传自己的本地仓库p496

响应式布局

响应式开发原理

bootstrap前端开发框架

http://bootstrap.com/

24.7.31

栅栏选项参数

一行十二份

<!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">
  <!-- 一定不要忘记引入bootstrap 的样式文件 -->
  <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
  <title>Document</title>
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">1</div>
      <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">2</div>
      <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">3</div>
      <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">4</div>
    </div>
  </div>

</body>

</html>

嵌套最好加个class：row，好把父元素的padding去掉