移动端CSS笔记

最新推荐文章于 2024-02-20 20:08:02 发布

zhongbusi

最新推荐文章于 2024-02-20 20:08:02 发布

阅读量198

点赞数

分类专栏： # CSS笔记

本文链接：https://blog.csdn.net/weixin_45678090/article/details/107436984

版权

CSS笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Viewport视口

在移动端viewport视口就是浏览器显示页面内容的屏幕区域。
在viewport中有两种视口。
分别表示为，visual viewport（可是视口）和layout viewport（布局视口）

visual viewport固定大小跟屏幕大小相同，在上面。
而layout viewport可改变大小，在下面。
Layout viewport默认大小为980像素。
可通过document.documentElement.clientWidth获取。
现代网页需要将layout viewport设置成跟visual viewport等同大小，方便进行网页制作。

Viewport设置

通过<meta>标签进行设置，name属性指定viewport值，content属性进行视口配置。

取值	含义
width	设置layout viewport的宽度特定值，device-width表示设备的宽度。
height	设置layout viewport的高度特定值，一般不进行设置。
initial-scale	设置页面的初始缩放
minomum-scale	设置页面的最小缩放
maximum-scale	设置页面的最大缩放
user-scalable	设置页面能否进行缩放

移动端适配方案

1、百分比布局，也叫流式布局。代表网站：优酷、百度、天猫、腾讯。
2、等比例缩放布局，也叫rem布局。代表网站：网易、爱奇艺、淘宝、美团。

在这里插入图片描述

流式布局原则

在这里插入图片描述
优点：大屏会显示更多的内容。
缺点：宽屏下比例会有些不协调。

rem布局

单位：
	em：是一个相对单位，1em等于当前元素或父元素的font-size值。
	rem：是一个相对单位，1rem等于根元素的font-size值。
	vw / vh ：把屏幕分成100份，1vw等于屏幕宽的1%。

在rem布局时，利用屏幕大小不同 设置的1rem换算的大小不同，从而控制容器大小。

动态设置font-size:

通过JS
意思就是  用屏幕宽度/适合的数 = n px			就是1 rem=n px
			var fontsize = document.documentElement.clientWidth / （自己看需要多少）
			document.documentElement.style.fontSize = fontsize + 'px';
			
通过vw
距离说明，如果想要在iphone6下得到100px，怎么做呢？
	因为 iphone6 屏幕宽度为375；
	所以 1vw = 3.75px；
	所以100px = 26.666667vw;

注：用rem布局需要给body重置以下font-size：16px（保证字体大小

响应式布局

利用媒体查询，即media queries，可以针对不同的媒体类型定义不同的样式，从而实现响应式布局。

媒体类型：

取值	含义
all	用于所有设备
print	用于打印机和打印预览
screen	用于电脑屏幕，平板电脑，智能手机等
speech	应用于屏幕阅读器等发送设备

常见选项：

取值	含义
and	可以理解为 & 符号
not	可以理解为取反例：>= 取反后就是 <
min-width	可以理解为>=这个数之后，代码才会执行
max-width	可以理解为<=这个数之后，代码才会执行
orientation:portrait	是在竖屏下执行的
orientation: landscape	是在横屏下执行的
	引入外部

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 下行代码是link标签的写法示例： -->
    <!-- <link rel="stylesheet" href="CSS.css" media="all and (min-width:600px) and (max-width:1000px)"> -->
    <title>媒体查询</title>
    <style>
        /* 
        下行代码是一些常用媒体查询的写法示例：
        @media all and (min-width:600px) and (max-width:1000px){
            .fu{
                width: 100px;
                height: 50px;
                border: 1px dotted blue;
            }
        } */

        /* 
        下面的代码是竖屏和横屏的写法示例：
        @media all and (orientation:portrait){
            .fu{
                width: 100px;
                height: 100px;
                border: 1px solid red;
            }
        }
        @media all and (orientation: landscape) {
            .fu{
                width: 100px;
                height: 100px;
                border: 1px solid blue;
            }
        } */
    </style>
</head>
<body>
    <div class="fu">
    </div>
</body>
</html>