HTML、CSS学习笔记5(移动端基础知识、Flex布局)

news/2024/10/31 5:24:50/

一、移动端基础知识

1.PC端和移动端区别

移动端:手机版网页,手机屏幕,网页宽度多数为100%,没有版心

PC端:电脑版网页,屏幕,网页固定版心

PC端和移动端不是同一个网页

2.如何在电脑里面边写代码边调试移动端网页效果

使用谷歌浏览器(查看源代码,使用谷歌模拟器)

3.分辨率

1)屏幕尺寸:指的是屏幕对角线的长度,一般使用英寸来度量

2)PC分辨率:(越高越好)

1920 * 1080  (横着能显示1920个像素点,竖着能显示1080个像素点)

1366 * 768

3) 缩放150%(放大150%则横着能显示的像素点变少了)

公式:(1920 / 150% )*(1080 / 150%)

4)分辨率分类

物理分辨率是生产屏幕时就固定的,它是不可被改变的

逻辑分辨率是由软件(驱动)决定的

写代码时尽量使用逻辑分辨率

4.视口(移动端)

视口标签的作用:实现网页的宽度跟(如手机)设备宽度一样

注:PC端视口不用考虑,跟逻辑分辨率一致,默认100%(移动端默认980)

不用记,HTML中有

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 视口标签 viewport即视口--><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body></body>
</html>

5.二倍图(即比例关系2:1,750像素的图)

移动端一般参考iPhone6/7/8这款手机出设计稿来写代码

设计师给的搞像素是750(而不是375)(即写代码以750像素来写)(原因:让图片更加清晰)

 图片分辨率,为了高分辨率下图片不会模糊失真

网站开发以二倍图居多

将设计稿放到Pxcook(像素大厨)里面,点击“ <>开发 ”模式,

-->设计图(1x  /  2x)--> 2x模式即375px(书写代码时注意要转换为2x模式来测量宽度 ,因为要基于逻辑分辨率375)

6.百分比布局(流式布局)

效果:宽度自适应,高度固定

(D:\前端基础\2023寒假web学习\题目\2移动web开发\学习包\2.3.1素材(8)\素材)

二、Flex布局/弹性布局

D:\前端基础\2023寒假web学习\题目\2移动web开发\学习包\2.3.2素材(9)\素材

1.flex简介

 

 网站:https://caniuse.com/用来查询哪些浏览器是否兼容某个标签、。。。

2.flex组成

 注:

1.父元素:(上一级,亲爹)

2.弹性容器:父元素(亲爹)即弹性盒子

3.默认主轴在水平,侧轴在垂直方向

3.Flex--主轴对齐方式:justify-content

 

 注:

  • space-around:视觉效果:子级之间的距离是父级两头距离的2倍

  • space-between:间距在弹性盒子(子级)之间

 

 

  • space-evenly:所有地方的间距都相等

 

4.Flex--侧轴对齐方式:

align-items(添加到父级上)

align-self(添加到子级上)

 

  • align-items: center;

  •  align-items: stretch; 拉伸,默认值,测试时去掉子级高度

 如果将子级高度注释掉,弹性盒子沿着主轴线拉满整个盒子

 

  • align-self: center;

 5.弹性盒子尺寸特点

单独设置某个弹性盒子(子级)的对齐方式,若弹性盒子(子级)没有给宽度or高度,则按内容的高度来定

 6.flex--伸缩比

属性: flex:值;

取值分类: 数值(整数)

注意:只占用父盒子剩余尺寸的份数

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.box {display: flex;height: 300px;border: 1px solid #000;}.box div {height: 200px;margin: 0 20px;background-color: pink;}.box div:nth-child(1) {width: 50px;}.box div:nth-child(2) {flex: 3;}.box div:nth-child(3) {flex: 1;}</style>
</head>
<body><div class="box"><div>1</div><div>2</div><div>3</div></div>
</body>
</html>

 上述编码,除去1盒子所占尺寸(宽度),父级的剩下尺寸2盒子占3份,3盒子占1份

 

 

 


http://www.ppmy.cn/news/29816.html

相关文章

Python写一个自动发送直播弹幕的工具,非常简单

哈喽大家好&#xff0c;今天给大家用Python整一个可以在直播间自动发弹幕的工具&#xff0c;来为喜欢的主播疯狂扣6 &#xff01; 事情原由昨晚回家&#xff0c;表弟在看LOL直播&#xff0c;看得我气不打一处来&#xff0c;差点就想锤他。 身为程序员的表弟&#xff0c;看直…

自学大数据第三天~终于轮到hadoop了

前面那几天是在找大数据的门,其实也是在搞一些linux的基本命令,现在终于轮到hadoop了 Hadoop hadoop的安装方式 单机模式: 就如字面意思,在一台机器上运行,存储是采用本地文件系统,没有采用分布式文件系统~就如我们一开始入门的时候都是从本地开始的; 伪分布式模式 存储采用…

『Javascript基础重点』1.提前声明问题,你苦恼写了js函数代码但是不会生效的问题吗?

目录1. var与声明提前不可不说的故事2. 变量的声明提前例程2.1 对于函数内外值的改变&#xff08;关键区别&#xff0c;第二点和第三点目前没有遇到&#xff09;2.2 delete删除2.3 提升变量声明3. 函数的声明提前例程总结欢迎关注 『Javascript基础重点』 专栏&#xff0c;持续…

linux离线状态下将视频mp4格式转换m3u8

因为业务需求&#xff0c;python文件生成的视频为MP4格式&#xff0c;无法在前端浏览器正常播放&#xff0c;需切换m3u8格式&#xff0c;但因为服务器是没有网络的&#xff0c;因袭需要在离线状态下进行完成。 1.离线安装ffmpeg 看网上许多教程&#xff0c;ffmpeg可完成视频格…

员工入职流程自动化的原因

人和人之间的第一印象非常重要&#xff0c;一段缘分能不能开始&#xff0c;就看第一印象够不够给力了。其实&#xff0c;公司和新员工之间也存在着这样的关系&#xff0c;但也有些许差别。公司对新员工的第一印象&#xff0c;更多是从第一次见面的时候就产生了&#xff0c;而新…

C# IoC控制反转学习笔记

一、什么是IOC IoC-Invertion of Control&#xff0c;即控制反转&#xff0c;是一种程序设计思想。 先初步了解几个概念&#xff1a; 依赖&#xff08;Dependency&#xff09;&#xff1a;就是有联系&#xff0c;表示一个类依赖于另一个类。 依赖倒置原则&#xff08;DIP&a…

Java中的自动类型提升与强制类型转换

一、自动类型提升 自动类型提升是指在程序运行时因为某种情况需要&#xff0c;JVM将较小的数据类型自动转换为较大的数据类型&#xff0c;以保证精度和正确性。在Java中&#xff0c;需要进行类型提升的情况有以下几种&#xff1a; 1. byte、short和char提升为int类型 当运算…

这款 Python 工具进行数据分析及数据可视化真的很棒啊

前言 大家好&#xff0c;今天我们以全国各地区衣食住行消费数据为例&#xff0c;来分析2022年中国统计年鉴数据&#xff0c;统计全国各地人民的消费地图&#xff0c;看看&#xff1a; 哪个省份的人最能花钱 哪个省份的人最舍得花钱 哪个省份的人最抠门 全国各地区人民在吃、穿…