web学习 -- css 响应式web设计 Viewport

最新推荐文章于 2021-02-21 20:21:19 发布
最新推荐文章于 2021-02-21 20:21:19 发布
阅读量735 收藏 1
点赞数
分类专栏： css 前端 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39273039/article/details/107837807
版权
前端 同时被 2 个专栏收录
40 篇文章 0 订阅
订阅专栏
css
2 篇文章 0 订阅
订阅专栏

Viewport

Viewport

viewport 是用户网页的可视区域。

1、语法

针对移动网页优化过的页面的viewport meta标签大致如下

<meta name="viewport" content="width=device-width, initial-scale=1.0">
  • width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width
    为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
  • height：和 width 相对应，指定高度。
  • initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
  • maximum-scale：允许用户缩放到的最大比例。
  • minimum-scale：允许用户缩放到的最小比例。
  • user-scalable：用户是否可以手动缩放。

2、网格视图

大部分网页是基于网格设计的，这些网页是按列布局的
在这里插入图片描述
响应式网格视图通常是 12 列，宽度为100%，在浏览器窗口大小调整时会自动伸缩。

2.1 创建

前提：所有的HTML元素都有box-sizing 属性且设置为 border-box；确保边距和边框包含在元素的宽度和高度间。

* {
    box-sizing: border-box;
}

完整代码

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
* {
    box-sizing: border-box;
}
.header {
    border: 1px solid red;
    padding: 15px;
}
.menu {
    width: 25%;
    float: left;
    padding: 15px;
    border: 1px solid red;
}
.main {
    width: 75%;
    float: left;
    padding: 15px;
    border: 1px solid red;
}
</style>
</head>
<body>

<div class="header">
<h1>Chania</h1>
</div>

<div class="menu">
<ul>
<li>The Flight</li>
<li>The City</li>
<li>The Island</li>
<li>The Food</li>
</ul>
</div>

<div class="main">
<h1>The City</h1>
<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
<p>Resize the browser window to see how the content respond to the resizing.</p>
</div>

</body>
</html>

在这里插入图片描述

3、媒体查询 @media

3.1、定义

媒体类型允许指定文件将如何在不同的媒体呈现

@media 针对不同的屏幕尺寸设置不同的样式

3.2、语法

@media mediatype and|not|only (media feature) {
    CSS-Code;
}
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
示例

如果浏览器窗口小于500px，背景将变为浅蓝色

@media only screen and (max-width: 500px) {
    body {
        background-color: lightblue;
    }
}

3.3、媒体类型

在这里插入图片描述

3.4、媒体功能

值描述
aspect-ratio定义输出设备中的页面可见区域宽度与高度的比率
color定义输出设备每一组彩色原件的个数。如果不是彩色设备，则值等于0
……

3.5、示例

/* For width smaller than 400px: */
body {
    background-image: url('img_smallflower.jpg');
}

/* For width 400px and larger: */
@media only screen and (min-width: 400px) { #检测浏览器宽度
    body {
        background-image: url('img_flowers.jpg');
    }
}

/* 设备小于 400px: */
body {
    background-image: url('img_smallflower.jpg');
}

/* 设备大于 400px (也等于): */
@media only screen and (min-device-width: 400px) {#检测设备宽度
    body {
        background-image: url('img_flowers.jpg');
    }
}

4、图片

4.1、width

如果 width 属性设置为 100%，图片会根据上下范围实现响应式功能

img {
    width: 100%;
    height: auto;
}

注：以上实例中，图片会比它的原始图片大

4.2、max-width

max-width 属性设置为 100%, 图片永远不会大于其原始大小

img {
    max-width: 100%;
    height: auto;
}

4.3、背景图片

背景图片可以响应调整大小或缩放，设置background-size

contain

按比例自适应内容区域。
图片保持其比例不变（部分区域会留白）

div {
    width: 100%;
    height: 400px;
    background-image: url('img_flowers.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    border: 1px solid red;
}
100% 100%

背景图片将延展覆盖整个区域（图片拉伸，充满整个区域）

div {
    width: 100%;
    height: 400px;
    background-image: url('img_flowers.jpg');
    background-size: 100% 100%;
    border: 1px solid red;
}
cover

背景图像扩展至足够大，以使背景图像完全覆盖背景区域（保持了图片的比例但是图片部分内容无法显示在背景定位区域中）

div {
    width: 100%;
    height: 400px;
    background-image: url('img_flowers.jpg');
    background-size: cover;
    border: 1px solid red;
}

5、视频

在网页中添加视屏
示例会根据div区域大小自动调整并占满整个div区域

video {
    width: 100%;
    height: auto;
}

5.1、width

width 属性设置为 100%，视频播放器会根据屏幕大小自动调整比例

video {
    width: 100%;
    height: auto;
}

5.2、max-width

max-width 属性设置为 100%, 视频播放器会根据屏幕自动调整比例，但不会超过其原始大小

video {
    max-width: 100%;
    height: auto;
}

6、框架 – BootStrap

菜鸟郭郭
关注
专栏目录
响应式 Web 设计 - Viewport
rolanannn的博客
04-11 695
帮助大家快速了解前段响应式基础操作
移动web现状、viewport视口、二倍图、移动web开发主流方案、布局技术选型(流式布局、flex弹性布局、less+rem+媒体查询布局、混合布局、媒体查询、bootstrap)
专研前端，探索后端
04-27 1116
移动端web现状： 移动端常见浏览器：UC浏览器，QQ浏览器，Opera浏览器，百度手机浏览器，360安全浏览器，谷歌浏览器，搜狗手机浏览器，猎豹浏览器及杂牌浏览器。移动端常见的浏览器都是基于webkit内核开发的，国内机操作系统也是基于Android开发的，因此在移动开发中只兼容主流浏览器，即处理webkit内核浏览器即可。 手机屏幕现状：移动设备的屏幕尺寸繁多，常见Android设备分辨率有：480x800、 480x854、 540x960、720x1280、1080x1920、2k、4k等；iPho
meta viewport属性含义
mib_2012的博客
06-30 121
&lt;meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/&gt;其中：width - viewport的宽度height - viewport的高度initial-scale - 初始的缩放比例mi...
CSS 9 响应式与自适应补充--viewport的深入理解(转载)
武林半侠的博客
12-03 570
CSS 9 响应式与自适应补充--viewport的深入理解(转载)   移动前端开发之viewport的深入理解在移动设备上进行网页的重构或开发，首先得搞明白的就是移动设备上的viewport了，只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用，才能更好地让我们的网页适配或响应各种不同分辨率的移动设备。 一、viewport的概念 通俗的讲，移动设备
Web-viewport
JackDan9
09-27 404
手机网页宽度: <meta name="viewport" content=" height = [pixel_value | device-height] , width = [pixel_value | device-width ] , initial-scale = float_value ,
viewport是什么？(江湖称响应式web设计)
乔治大哥的博客
02-04 840
响应式 Web 设计 - Viewport 什么是 Viewport? viewport 是用户网页的可视区域。 viewport 翻译为中文可以叫做"视区"。 手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同...
Html-css-responsiveweb:Html-Css-响应式网页设计
08-04
总结起来，"Html-css-responsiveweb"项目是一个关于使用HTML和CSS进行响应式网页设计的实践示例。通过学习这个项目，你可以了解到如何创建一个不仅在台式机上，而且在手机和平板电脑等不同设备上都能提供优质用户...
前端开源库-postcss-px-to-viewport
08-29
总的来说，`postcss-px-to-viewport`是前端开发中的利器，它简化了响应式布局的工作流程，让开发者能够更专注于设计和用户体验，而不是繁琐的单位转换。通过合理地配置和使用这个开源库，我们可以为用户提供更加智能...
Web-前端html+css从入门到精通 198. 移动端之viewport视口.zip
05-23
在Web前端开发中，HTML和CSS是构建网页的基石，而...通过精细控制视口的设置，结合响应式设计和适当的布局策略，我们可以创建出既美观又适应各种设备的网页。在实际开发过程中，不断学习和实践是提升这一技能的关键。
像素密度与CSS3的viewport在移动端Web响应式布局中的运用
09-27
在响应式布局中，CSS3的viewport元标签以及像素密度的概念起着至关重要的作用。它们共同决定了网页如何在不同设备上进行适配和显示。 首先，让我们来理解viewport的概念。viewport是虚拟的概念，指的是浏览器可视...
sensitive-web-css：从零开始的响应式网格CSS网站布局
02-13
响应式Web设计是一种现代网页开发技术，旨在提供跨设备、跨屏幕尺寸的流畅用户体验。"sensitive-web-css：从零开始的响应式网格CSS网站布局"项目，显然是一个指导初学者构建响应式网页布局的学习资源。它可能包含了...
移动Web开发基础-Viewport
前端向朔
09-23 1704
导语：移动Web开发自然要从Viewport说起，那什么是Viewport呢？字面意思为视图窗口，在移动设备上就是指用来显示页面的那部分区域。 用移动设备来访问没有做特殊处理的PC页面，移动设备是显示不下那么宽的内容的，所以移动设备一般会将页面缩小来显示整个页面，用户可以将页面放在来看清楚内容，在做移动Web开发的时候，我们可以手动的设置页面的视窗宽度，页面缩放比例以及是否允许用户...
响应式 Web 设计 - Viewport，概念和用法
weixin_40551017的博客
02-27 150
什么是 Viewport? viewport 是用户网页的可视区域。 viewport 翻译为中文可以叫做"视区"。 手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。 设置 Viewport 一个常用的针...
web移动开发之视口viewport
weixin_45504050的博客
08-08 1208
视口 viewport 视口（viewport）是用来约束网站中最顶级块元素的，即它决定了的大小。 PC设备 在PC设备上viewport的大小取决于浏览器窗口的大小，以CSS像素做为度量单位。 我们都能理解的大小是会影响到网页布局的，而viewport又决定了的大小，所以viewport间接的决定并影响了网页的布局。 // 获取viewport的大小 document.documentEleme...
web移动端viewport的理解
boke的博客
07-01 556
1. viewport 概念 meta viewport 标签：首先是由苹果公司在其safar浏览器中引入的，目的是解决移动设备显示网页大小的问题。viewport概念上有人提出了，visual viewport、layout viewport、ideal viewport 三个概念。
Webapp---深入理解viewport，viewport测试，viewport查询网站
MIKUScallion的专栏
04-01 1283
一，关于深入理解viewport，这里推荐一篇文章： http://www.cnblogs.com/2050/p/3877280.html 二，这是一段viewport测试代码，可以输出layout viewport，visual viewport，ideal viewport； 其实我们最关心的是：ideal viewport的宽度，然后基于这个宽度做流式布局的webapp开发。
移动web开发viewport记录
u011972597的博客
12-10 273
现在做的项目要重新写viewport，就研究了一下。本来就对这一块迷迷糊糊的，看了几位大牛的文章就更迷糊了，好歹最后是弄得差不多了，赶紧记录下来。 先来看下viewport是什么意思，字面意思是视图窗口，就是显示页面的地方，如果不设置他的属性，一般咱们在移动设备上看到的网页都比设备本身的大，下面是viewport的属性：width 可视区域的宽度，为一个正整数，或字符串”width-device”
移动web开发viewport深入理解
zerlinda_c的博客
12-17 848
在移动设备上进行网页的重构或开发，首先得搞明白的就是移动设备上的viewport了，只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用，才能更好地让我们的网页适配或响应各种不同分辨率的移动设备。一、viewport的概念　　通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点，就是浏览器上(也可能是一个app中的web
基于Viewport的移动端web屏幕基本适配方案详解
qq_43293207的博客
02-21 4623
欢迎访问个人博客网站： http://www.zhuxin.club 1. 前言 随着手机，平板等移动设备的普及，现如今的绝大多数web应用会对桌面端和移动端进行网页适配的兼容处理。由于移动端和桌面端设备的型号和分辨率种类比较繁杂，如果专门为这些不同设备和终端分别建立网站显然成本太高，很不现实，并且它们之间的界限也很模糊。所以创建可以适配多种设备的web应用是如今web开发的基本需求。 在我们具体分析主流的适配方案之前，先让我们了解一下以下这些主要概念： 2. 各种“像素” 2.1 物理像素 物理像素（又称
响应式Web设计实战：HTML5与CSS3结合应用
"响应式Web设计HTML5+CSS3" 响应式Web设计是现代Web开发中的核心概念，它旨在创建能够适应不同设备和屏幕尺寸的网站。随着移动互联网的快速发展，这种设计方法变得至关重要，因为它确保了用户在PC、手机、平板电脑...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值