viewport——响应式布局/适配方案

最新推荐文章于 2024-05-16 13:18:18 发布
最新推荐文章于 2024-05-16 13:18:18 发布
阅读量690 收藏 1
点赞数
分类专栏： WEB移动 文章标签： viewport 响应式 content 设置
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_20497071/article/details/98640893
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=yes">
    <title>Title</title>
    <style>
        body{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 100%;
            height:500px;
            background: pink;
        }
        /*流式布局：就是百分比布局，非固定像素，内容向两侧填充，理解成流动的布局，称为流式布局*/
        /*视觉窗口：viewport,是移动端特有。这是一个虚拟的区域，承载网页的。
          承载关系：浏览器---->viewport---->网页
        */
        /*适配要求：
            1. 网页宽度必须和浏览器保持一致
            2. 默认显示的缩放比例和PC端保持（缩放比例1.0）
            3. 不允许用户自行缩放网页
            满足这些要求达到了适配，国际上通用的适配方案，标准的移动端适配方案。
        */
        /*适配设置：
            如果任何设置都没有，默认走的就是viewport的默认设置
            去设置新的viewport设置,达到适配要求。
            <meta name="viewport"> 设置视口的标签  在head里面并且应该紧接着编码设置
            viewport的功能：
            1. width    可以设置宽度   (device-width 当前设备的宽度)
            2. height   可以设置高度
            3. initial-scale  可以设置默认的缩放比例
            4. user-scalable  可以设置是否允许用户自行缩放
            5. maximum-scale  可以设置最大缩放比例
            6. minimum-scale  可以设置最小缩放比例
            在<meta name="viewport" content="" >  content="" 使用以上参数
            1. width=device-width   宽度一致比例是1.0
            2. initial-scale=1.0    宽度一致比例是1.0
            3. user-scalable=no     不允许用户自行缩放  （yes，no  1,0）
            标准适配方案：
            <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">
            meta:vp + tab  快捷方式
        */
    </style>
</head>
<body>
<div class="box">
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
</div>
</body>
</html>

 

我的哥哥呦
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
移动web开发—— 响应式布局Bootstrap
weixin_52819925的博客
08-03 699
Bootstrap Bootstrap简介 Bootstrap 来自 Twitter（推特），是目前最受欢迎的前端框架。Bootstrap 是基于HTML、CSS 和 JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。 中文网：http://www.bootcss.com/ 官网：http://getbootstrap.com/ 推荐网站：http://bootstrap.css88.com/ Bootstrap：是用于开发响应式布局，移动设备优先的web项目。 框架：顾名思义就是一套架构，
图文并茂让你必须弄懂viewport配套示例代码.rar
05-01
“博客地址.txt”文件很可能包含了详细的文章链接，通过阅读文章，你将获得更全面的理论知识，包括视口的概念起源、它在响应式设计中的角色，以及如何处理滚动、缩放和其他交互问题。 “img”文件夹中的图片可能是...
移动端布局——响应式布局
WikY
09-07 1678
响应式开发原理 使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。 响应式开发可以实现，一套界面在不同终端进行正常显示。 移动端设备的屏幕分辨率太多，响应式将这些进行了归类： 设备划分 尺寸区间 超小屏幕（手机） < 768px 小屏设备（平板） >= 768px ~ < 992px 中等屏幕（桌面显示器） >= 992px ~ <1200px 宽屏设备（大桌面显示器） >= 1200px 响应式布局容器
移动端适配（rem，vw）+响应式布局
G24gg的博客
05-16 524
Less 是一种动态样式语言，它扩展了 CSS 的功能，使得编写 CSS 更加高效和易于维护。Less 通常被称为 CSS 预处理器，因为它用特殊的语法和功能扩展了 CSS，最终会被编译成普通的 CSS 代码，以便浏览器可以正确解析和应用。 以下是 Less 的一些主要特点： 三、Bootstrap前端框架(Foundation等) 一、官网下载 min体积小，压缩过下载别忘了bi-
响应式布局——页面适配各种终端尺寸
undefined
11-13 1555
介绍了尺寸/像素/分辨率以及css常用单位于几种解决响应式布局的方法
移动端WEB开发——响应式布局
qq_43498002的博客
11-02 284
移动端WEB开发之响应式布局 1.0 响应式开发原理 1.1 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。 设备的划分情况： 设备划分 尺寸区间 超小屏幕 <768px 小屏设备 >= 768px ~ <992px 中等屏幕（桌面显示器） >=992px ~ <1200px 宽屏设备（大屏显示器） >=1200px 小于768的为超小屏幕（手机） 768~992之间的为小屏设备（平板）
移动web开发—— 响应式布局
weixin_52819925的博客
08-02 90
响应式开发原理 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。 响应式开发可以实现，一套界面在不同终端进行正常显示。 移动端设备的屏幕分辨率太多，响应式将这些进行了归类： 设备划分 尺寸区间 超小屏幕（手机） < 768px 小屏设备（平板） >= 768px ~ < 992px 中等屏幕（桌面显示器） >= 992px ~ <1200px 宽屏设备（大桌面显示器） >= 1200px
移动Web开发——响应式布局（一）
zhr_beyond的博客
03-02 1729
响应式布局（一） 学习目标 （1）能够说出响应式原理 （2）能够使用媒体查询完成响应式导航 （3）能够使用 bootstrap 的栅格系统 （4）能够使用 bootstrap 的响应式工具 （5）能够独立完成阿里百秀首页案例 1.响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。 设备划分 尺寸区间 超小屏幕（手机） < 768px 小屏设备（平板） >= 768px ~ < 992px 中等屏幕（桌面显示器） >
响应式布局的实现方式
ColdCoder的博客
06-16 3684
前言 2004年，Cameron Adams写了一篇题为《Resolution dependent layout》的帖子，描述了一种可以创造适应多种屏幕分辨率的设计的方式。这种方式需要JavaScript来探测屏幕的分辨率，载入恰当的CSS。 2008年，Zoe Mickley Gillenwater发布了她的著作，在里面描述并标准化了可变站点建立的不同方式，试图在充满屏幕和完全保持固定尺寸之间找到最佳平衡。 “响应式设计”这个词是Ethan Marcotte在2010年首度提出的，他将其描述为三种技
移动端web——响应式布局和Bootstrap框架
david2000999的博客
11-08 416
目录移动端WEB开发之响应式布局1.0 响应式开发原理1.1 响应式开发原理1.2 响应式布局容器2.0 Bootstrap2.1Bootstrap简介2.2 bootstrap优点2.3 版本简介2.4bootstrap基本使用2.5 bootstrap布局容器2.6 bootstrap栅格系统 移动端WEB开发之响应式布局 1.0 响应式开发原理 1.1 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。 设备的划分情况： 小于768的为超小屏幕（手机）
移动端web开发之四娃——响应式布局
qq_43161118的博客
04-23 135
移动端WEB开发之响应式布局 1、 响应式开发原理 1.1 响应式开发原理 使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。 设备的划分情况： 小于768的为超小屏幕（手机） 768~992之间的为小屏设备（平板） 992~1200的中等屏幕（桌面显示器） 大于1200的宽屏设备（大桌面显示器） 1.2 响应式布局容器 响应式需要一个父级做为布局容器，来配合子级元素...
vue实现PC端分辨率适配操作
10-15
此外，对于响应式设计，可能还需要结合Vuex或其他状态管理工具来处理不同分辨率下组件状态的切换。 总的来说，Vue实现PC端分辨率适配主要是通过lib-flexible调整基础字体大小，以及px2rem-loader自动将px转换为rem...
js中flexible.js实现淘宝弹性布局方案.docx
01-21
在前端开发中，面对不同设备的屏幕尺寸和像素密度，淘宝提出了一种名为“flexible”的布局方案，主要通过灵活的单位（如rem）和JavaScript库flexible.js来实现响应式布局。这种方法能够确保网页在不同设备上呈现出...
Croissant:第三周第5课-SheCodes响应式
04-05
在本课程中，我们将深入探讨SheCodes的第三周第5课——“响应式设计”，以“Croissant”为主题。响应式网页设计是现代Web开发的关键技术，它允许网站在不同设备上，如桌面电脑、平板电脑和手机，提供优化的用户体验...
手机端用rem+scss做适配的详解
11-21
在移动设备上构建响应式网站时，适配问题至关重要。传统的做法通常是设定viewport width为device-width，并基于最小宽度（如320px）进行布局，使用px和百分比作为单位。然而，这种方法在不同尺寸设备上展示效果可能...
pi_heif-0.17.0-pp310-pypy310_pp73-macosx_12_0_x86_64.whl
最新发布
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
mmexport1722080103662.jpg
07-27
mmexport1722080103662.jpg
matlab 20244a 6
07-27
matlab 20244a 6
viewport响应式布局具体怎么实现
06-08
Viewport 是指浏览器窗口中用于显示网页的区域，而 viewport 响应式布局则是指根据不同的设备屏幕大小，动态改变 viewport 的大小以适应不同的屏幕大小，从而实现响应式布局。具体实现如下： 1. 设置 viewport 的 meta 标签 在 HTML 文件头部添加以下 meta 标签，用于指定 viewport 的大小和缩放比例： ```html <meta name="viewport" content="width=device-width, initial-scale=1.0"> ``` 其中 `width=device-width` 表示 viewport 的宽度为设备的宽度，`initial-scale=1.0` 表示初始缩放比例为 1。 2. 使用 CSS 媒体查询 使用 CSS 媒体查询可以根据不同的屏幕大小，应用不同的样式。例如，我们可以针对不同的屏幕大小，设置不同的布局方式、字体大小、图片大小等。以下是一个简单的媒体查询示例： ```css @media (max-width: 768px) { /* 在屏幕宽度小于 768px 时应用以下样式 */ body { font-size: 16px; } } @media (min-width: 769px) and (max-width: 992px) { /* 在屏幕宽度在 769px 到 992px 之间时应用以下样式 */ body { font-size: 18px; } } @media (min-width: 993px) { /* 在屏幕宽度大于 993px 时应用以下样式 */ body { font-size: 20px; } } ``` 以上代码将根据屏幕宽度的不同，应用不同的字体大小。 3. 使用响应式图片 在响应式布局中，图片也需要根据屏幕大小的不同，动态调整尺寸。可以通过以下两种方式实现： - 使用 CSS 设置图片的最大宽度和最大高度，让图片根据父元素的大小进行缩放。 ```css img { max-width: 100%; height: auto; } ``` - 使用 `<picture>` 元素或 `<img>` 元素的 `srcset` 属性，根据不同的屏幕大小，加载不同尺寸的图片。 ```html <picture> <source media="(min-width: 768px)" srcset="large.jpg"> <source media="(max-width: 767px)" srcset="small.jpg"> <img src="fallback.jpg" alt="fallback image"> </picture> ``` 以上就是使用 viewport 实现响应式布局的具体方法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值