前端页面布局之【响应式布局】

目录

  • 🌟前言
  • 🌟优点
  • 🌟缺点
  • 🌟@media兼容性
  • 🌟利用CSS3-Media Query实现响应式布局
  • 🌟常见的媒体类型
  • 🌟常见的操作符
  • 🌟属性值
  • 🌟设备检测
  • 🌟响应式阈值选取
  • 🌟简单案例查看
  • 🌟写在最后

在这里插入图片描述

🌟前言

现在很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果,设计师提出了响应式布局的设计方案。所谓的响应式布局,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。也就说一个页面可以在多个终端呈现出你想要的效果,能够兼容各个终端。

🌟优点

  • 面对不同分辨率设备灵活性强
  • 能够快捷解决多设备显示适应问题
  • 根据不同的显示器调整设计最适合用户浏览习惯的页面

🌟缺点

  • 兼容各种设备工作量大,效率低下
  • 代码累赘,会出现隐藏无用的元素,加载时间加长
  • 其实这是一种折衷性质的设计解决方案,多方面因素影响而达不到最佳效果
  • 因为要适应不同的设备,页面的结构可能会有所不同,会导致页面的辨识度不强

🌟@media兼容性

在这里插入图片描述

ie8及以下不支持 @media

Respond.js可帮助IE6-8兼容 "min/max-width" 媒体查询条件: Respond.js

使用方法:在页面中所有css文件的引用位置之后引用Respond.js。而且Respond.js的引用得越早,用户看到页面闪烁的机会越小。

🌟利用CSS3-Media Query实现响应式布局

  • media query:

通过不同的媒体类型和条件定义样式表规则。媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件

  • 语法结构及用法:

@media设备名 only (选取条件) not (选取条件) and(设备选取条件),设备二{sRules}

  • 在link中使用@media
    • screen:指的是一种媒体类型;
    • and:被称为关键词,与其相似的还有not,only。可能的操作符
    • max-width:600px这个就是属性值,媒体特性,也就是就是媒体条件。
<link rel="stylesheet" type="text/css" media="screen and (max-width:     600px)"href="link.css"/>
  • 在样式表中内嵌 @media
@media screen and (max-width: 600px) {
选择器 {属性:属性值;}
}

🌟常见的媒体类型

描述
all默认。适用于所有设备。
print打印预览模式/打印页。
screen计算机屏幕。

🌟常见的操作符

描述
and逻辑与,连接设备名与选择条件、选择条件1与选择条件2。
not排除某种设备
only限定某种设备类型
,设备列表

🌟属性值

媒体特性可用媒体类型接受min/max简介
width<length>视觉屏幕/触摸设备yes定义输出设备中的页面可见区域宽度(单位一般为px)
heigth<length>视觉屏幕/触摸设备yes定义输出设备中的页面可见区域高度(单位一般为px)
device-width<length>视觉屏幕/触摸设备yes定义输出设备的屏幕可见宽度(单位一般为px)
device-heigth<length>视觉屏幕/触摸设备yes定义输出设备的屏幕可见高度(单位一般为px)
orientationportrait /landscape位图介质类型no定义’height’是否大于或等于’width’。值portrait代表是,landscape代表否即设,备手持方向:portait为横向,landscape为竖向
aspect-ratio<ratio>位图介质类型yes定义’width’与’height’的比率,即浏览器的长宽比
device-aspect-ratio<ratio>位图介质类型yes定义’device-width’与’device-height’的比率,即设备屏幕长宽比。如常见的显示器比率:4/3, 16/9,16/10
color<integer>视觉媒体yes定义每一组输出设备的彩色原件个数。如果不是彩色设备,则值等于0
color-index<integer>视觉媒体yes定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表,则值等于0
monochrome<integer>视觉媒体yes定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备,则值等于0
resolution<resolution>位图介质类型yes定义设备的分辨率。如:96dpi,300dpi,118dpcm
scanprogressive / interlace电视类no定义电视类设备的扫描工序, progressive逐行扫描,interlace隔行扫描
grid<integer>栅格设备no用来查询输出设备是否使用栅格或点阵。只有1和0才是有效值,1代表是,0代表否

🌟设备检测

  • Phone
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone.css" />
  • iPad
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" type="text/css" />
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"  type="text/css" />
  • android
/*240px的宽度*/
<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css" />
/*360px的宽度*/
<link rel="stylesheet" media="only screen and (min-device-width:241px) and (max-device-width:360px)" href="android360.css" type="text/css" />
/*480px的宽度*/
<link rel="stylesheet" media="only screen and (min-device-width:361px) and (max-device-width:480px)" href="android480.css" type="text/css" />

🌟响应式阈值选取

响应式的阈值即不同设备宽度的临界值,该值由当前市面上设备分辨率比例得出,详见Statcounter:

阈值内宽设备描述
<768pxauto手机超小屏幕
≥768px750px平板小屏幕
≥992px970px桌面显示器中等屏幕
≥1200px1170px大桌面显示器大屏幕

🌟简单案例查看

F12打开控制台,控制台置与浏览器右侧,拖动观察页面变化

案例一:StatCounter Global Stats - Screen Resolution Market Share

案例二:苹果官方

案例三:Bootstrap

🌟写在最后

更多前端知识请大家持续关注,尽请期待。各位小伙伴让我们 let’s be prepared at all times!

✨原创不易,还希望各位大佬支持一下!
👍 点赞,你的认可是我创作的动力!
⭐️ 收藏,你的青睐是我努力的方向!
✏️ 评论,你的意见是我进步的财富!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/158573.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【使用教程】在Ubuntu下PMM60系列一体化伺服电机通过SDO跑循环同步位置模式详解

本教程将指导您在Ubuntu操作系统下使用SDO&#xff08;Service Data Object&#xff09;来配置和控制PMM60系列一体化伺服电机以实现循环同步位置模式。我们将介绍必要的步骤和命令&#xff0c;以确保您能够成功地配置和控制PMM系列一体化伺服电机。 01.准备工作 在正式介绍之…

位于同一子网下的ip在子网掩码配置错误的情况下如何进行通信(wireshrak抓包分析)

前言 最近看书发现个问题&#xff0c;正好想学习下wireshark的使用&#xff0c;于是抓包做了下实验。 问题是这样的&#xff0c;假设有服务器A和服务器B&#xff0c;正确配置下两者处于同一子网&#xff1b;此时B的网络配置正确&#xff0c;而A在配置子网掩码时出了错&#xff…

PromptScript:轻量级 DSL 脚本,加速多样化的 LLM 测试与验证

TL&#xff1b;DR 版本 PromptScript 是一个轻量级的 Prompt 调试用的 DSL &#xff08;Yaml&#xff09;脚本&#xff0c;以用于快速使用、构建 Prompt。 PromptScript 文档&#xff1a;https://framework.unitmesh.cc/prompt-script Why PromptScript &#xff1f; 几个月前&…

Qtcreator console 中文 乱码

开发环境&#xff1a;windows11 x64 位&#xff1b;Qt Creator 11.0.3&#xff1b;Based on Qt 6.4.1 (MSVC 2019, x86_64) 报错内容如图所示&#xff1a; 解决方法如下&#xff1a;

unity2022版本 实现手机虚拟操作杆

简介 在许多移动游戏中&#xff0c;虚拟操纵杆是一个重要的用户界面元素&#xff0c;用于控制角色或物体的移动。本文将介绍如何在Unity中实现虚拟操纵杆&#xff0c;提供了一段用于移动控制的代码。我们将讨论不同类型的虚拟操纵杆&#xff0c;如固定和跟随&#xff0c;以及如…

关于EEGLAB安装时报错“未定义函数或者变量‘EEGLAB’”

按照其他博主写的&#xff0c;下载EEGLAB&#xff08;最新版&#xff09;&#xff0c;然后解压&#xff0c;打开matlab&#xff08;2019a&#xff09;导入路径&#xff0c;在前述步骤都正确的情况下&#xff0c;命令行输入eeglab&#xff0c;matlab提示"未定义函数或者变量…

网络原理之初识

文章目录 前言计算机网络的发展史网络互连局域网局域网组建网络的方式 广域网网络通信基础IP 地址端口号网络协议五元组协议分层OSI 七层模型TCP/IP 五层协议网络设备所在分层 封装和分用 前言 在这个信息爆炸的时代&#xff0c;计算机网络已经渗透到我们生活的方方面面&#…

算法村开篇

大家好我是苏麟从今天开始我将带来算法的一些习题和心得体会等等...... 算法村介绍 我们一步步地学习算法本专栏会以闯关的方式来学习算法 循序渐进地系统的学习算法并掌握大部分面试知识 , 期待和大家一起进步 . 索大祝大家学有所成 , 前程似锦.

ESP32网络开发实例-从SD卡加载Web页面文件

从SD卡加载Web页面文件 文章目录 从SD卡加载Web页面文件1、应用介绍2、软件准备3、硬件准备4、Web页面代码实现5、Web服务器代码实现在文中,将展示如何构建一个 Web 服务器,为存储在SD卡中的 HTML 和 CSS 文件提供服务。 我们不必将 HTML 和 CSS 文本硬编码入代码中,而是创建…

多目标水母搜索算法(Multi-Objective Jellyfish Search algorithm,MOJS)求解微电网优化--提供MATLAB代码

一、微网系统运行优化模型 微电网优化模型介绍&#xff1a; 微电网多目标优化调度模型简介_IT猿手的博客-CSDN博客 参考文献&#xff1a; [1]李兴莘,张靖,何宇,等.基于改进粒子群算法的微电网多目标优化调度[J].电力科学与工程, 2021, 37(3):7 二、多目标水母搜索算法MOJS …

局域网上IP多播与IP单播关于MAC地址的区别

IP单播进行到局域网上的时候&#xff1a; 网际层使用IP地址进行寻址&#xff0c;各路由器收到IP数据报后&#xff0c;根据其首部中的目的IP地址的网络号部分&#xff0c;基于路由表进行查表转发。 查表转发的结果可指明IP数据报的下一跳路由器的IP地址&#xff0c;但无法指明…

数据库安全-H2 databaseElasticsearchCouchDBInfluxdb漏洞复现

目录 数据库安全-H2 database&Elasticsearch&CouchDB&Influxdb 复现influxdb-未授权访问-jwt 验证H2database-未授权访问-配置不当CouchDB-权限绕过配合 RCE-漏洞CouchDB 垂直权限绕过Couchdb 任意命令执行 RCE ElasticSearch-文件写入&RCE-漏洞Elasticsearch写…

School‘s Java test

欢迎来到Cefler的博客&#x1f601; &#x1f54c;博客主页&#xff1a;那个传说中的man的主页 &#x1f3e0;个人专栏&#xff1a;题目解析 &#x1f30e;推荐文章&#xff1a;题目大解析&#xff08;3&#xff09; 目录 &#x1f449;&#x1f3fb;第四周素数和念整数 &#…

【PostgreSQL启动,停止命令(重启)】

找到 /usr/lib/systemd/system文件夹路径看是否包含 postgresql服务 关闭服务&#xff1a; systemctl stop postgresql-12.service启动服务 systemctl start postgresql-12.service重启服务 systemctl restart postgresql-12查看状态 systemctl status postgresql-12.servi…

4+1视图与UML

目录 逻辑视图过程视图开发视图物理视图&#xff08;部署视图&#xff09;用例视图 41视图&#xff0c;即逻辑视图&#xff0c;过程视图&#xff0c;实现视图&#xff0c;部署视图&#xff0c;用例视图。 为什么不用一个视图&#xff1f; 针对多个用户&#xff0c;即终端用户&a…

打造震撼视觉效果,体验全新After Effects 2024 for Mac/win

想要创作令人惊叹、震撼人心的视觉效果吗&#xff1f;那就来尝试全新的After Effects 2024吧&#xff01;After Effects是业界领先的视觉特效和动画软件&#xff0c;为您提供了无限可能性。无论是电影、广告、视频、网站还是应用程序&#xff0c;After Effects都可以帮助您创建…

前端基础一:用Formdata对象来上传图片的原因

最近有人问&#xff1a;你是否能用json来传图片&#xff0c;其实应该这么理解就对了。 一、上传的数据体格式Content-Type 1.application/x-www-form-urlencoded 2.application/json 3.multipart/form-data 以上三种类型旨在告诉服务器需要接收的数据类型同事要…

论文阅读:Image-to-Lidar Self-Supervised Distillation for Autonomous Driving Data

目录 摘要 Motivation 整体架构流程 技术细节 雷达和图像数据的同步 小结 论文地址: [2203.16258] Image-to-Lidar Self-Supervised Distillation for Autonomous Driving Data (arxiv.org) 论文代码&#xff1a;GitHub - valeoai/SLidR: Official PyTorch implementati…

C++ 反向迭代器

反向迭代器的即正向迭代器的--&#xff0c;反向迭代器的--即正向迭代器的&#xff0c;反向迭代器和正向迭代器的很多功能都是相似的&#xff0c;因此我们可以复用正向迭代器作为反向迭代器的底层容器来封装&#xff0c;从而实现出反向迭代器&#xff0c;即&#xff1a;反向迭代…

python文本转语音

概述 目前有文本转语音的技术&#xff0c;可以用在配音领域&#xff0c;我个人因为一些需求&#xff0c;所以开始寻找这方面的资源&#xff0c;目前各大平台&#xff0c;比如腾讯&#xff0c;讯飞&#xff0c;阿里&#xff0c;百度等都有这样的API服务&#xff0c;我个人是是使…