前端标签——响应式

简介: 前端标签——响应式

初步了解响应式

/* @media 查询,你可以针对不同的媒体类型定义不同的样式。


@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。*/

/* screen 定位当前屏幕 */

@media screen and (max-width: nnpx)

注意格式:

注意 空格 的重要性,特别是在设置calc()值的时候,注意运算符和数值之间的空格,否则会出现无法运行的问题。


/* @media 查询,你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。*/
/* screen 定位当前屏幕 */
@media screen and (max-width: nnpx)
注意格式:
注意 空格 的重要性,特别是在设置calc()值的时候,注意运算符和数值之间的空格,否则会出现无法运行的问题。/* @media 查询,你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。*/
/* screen 定位当前屏幕 */
@media screen and (max-width: nnpx)
注意格式:
注意 空格 的重要性,特别是在设置calc()值的时候,注意运算符和数值之间的空格,否则会出现无法运行的问题。/* 响应式布局:大致可以针对浏览器分为以下三个部分
中小屏幕:以990为分界   <=calc(50px+990px+50px-1px)标准屏幕:以1190为分界>=(50px + 1190px + 50px) and <=(50px+1400px+50px-1px)大屏幕:以1400为分界>=50px + 1400px +50px
*/
@media screen and (max-width:calc(50px + 990px + 50px - 1px)) {
    .banxin {
        width: 990px;
        background-color: lightcyan;
    }
    html {
        max-width: calc(50px + 990px + 50px - 1px);
    }
  /* 设置某个块中的样式:进一步了解 “伪对象选择符”  */
    .left-nav::after {
        content: "我是小屏幕";
        color: #0f0d0d;
        display: block;
        font-size: 26px;
    }
}
@media screen and (min-width:calc(50px + 990px + 50px)) and (max-width:calc(50px + 1400px + 50px - 1px)) {
    .banxin {
        width: 1190px;
        background-color: lightsalmon;
    }
    html {
        max-width: calc(50px + 1190px + 50px);
        min-width: calc(50px + 1400px +50px -1px);
    }
    .left-nav::after {
        content: "我是标准屏幕";
        color: #0f0d0d;
        display: block;
        font-size: 26px;
    }
}
@media screen and (min-width:calc(50px + 1400px + 50px)) {
    .banxin {
        width: 1400px;
        background-color: lightgreen;
    }
    html {
        min-width: calc(50px + 1400px + 50px);
    }
    .left-nav::after {
        content: "我是大屏幕";
        color: #0f0d0d;
        display: block;
        font-size: 26px;
    }
}


image.png


浮动



/* 在此处定义了一套浮动样式,在调用时可直接引用,此处的写法可固定,根据具体情况可增减 */
.fl {
    float: left;
}
.fr {
    float: right;
}
/* 此处的目的是为了防止,标签塌陷,如果塌陷进而隐藏标签 */
.fo {
    overflow: hidden;
}
/* 定义了一个哈士奇,防止自己的块标签跑到别人的家里 */
.clearfix::before {
    content: " ";
    display: table; /* 显示为表格 */
}
/* 定义了一个哈士奇,防止别人的块标签跑到自己的家里 */
.clearfix::after {
    content: "";
    display: block; /* 把本伪标签变性为块状元素,设置宽和高为0后就看不见了 */
    width: 0;
    height: 0;
    clear: both; /* 从这个伪元素开始,前面的浮动不再影响后续标签的排版 */
}

伪对象选择符

E::before 设置在对象前(依据对象树的逻辑结构)发生的内容。用来和content属性一起使用,并且必须定义content属性。

E::after 设置在对象后(依据对象树的逻辑结构)发生的内容。用来和content属性一起使用,并且必须定义content属性。

image.png


相关文章
前端技术探索:构建高效、响应式Web应用的秘诀
前端技术探索:构建高效、响应式Web应用的秘诀
133 0
Vue.js 框架大揭秘:响应式系统、组件化与路由管理,震撼你的前端世界!
【8月更文挑战第27天】Vue.js是一款备受欢迎的前端JavaScript框架,以简洁、灵活和高效著称。本文将从三个方面深入探讨Vue.js:响应式系统、组件化及路由管理。响应式系统为Vue.js的核心特性,能自动追踪数据变动并更新视图。例如,通过简单示例代码展示其响应式特性:`{{ message }}`,当`message`值改变,页面随之自动更新。此外,Vue.js支持组件化设计,允许将复杂界面拆分为独立且可复用的组件,提高代码可维护性和扩展性。如创建一个包含标题与内容的简单组件,并在其他页面中重复利用。
110 3
前端serverless探索之组件单独部署时,利用rxjs实现业务状态与vue-react-angular等框架的响应式状态映射
本文深入探讨了如何将RxJS与Vue、React、Angular三大前端框架进行集成,通过抽象出辅助方法`useRx`和`pushPipe`,实现跨框架的状态管理。具体介绍了各框架的响应式机制,展示了如何将RxJS的Observable对象转化为框架的响应式数据,并通过示例代码演示了使用方法。此外,还讨论了全局状态源与WebComponent的部署优化,以及一些实践中的改进点。这些方法不仅简化了异步编程,还提升了代码的可读性和可维护性。
118 1
前端技术分享:使用Vue.js构建响应式表单
【10月更文挑战第1天】前端技术分享:使用Vue.js构建响应式表单
【前端web入门第二天】03 表单-下拉菜单 文本域 label标签 按钮 【附注册信息综合案例】
本文档详细介绍了HTML表单的多种元素及其用法,包括下拉菜单(`&lt;select&gt;` 和 `&lt;option&gt;`)、文本域(`&lt;textarea&gt;`)、标签解释(`&lt;label&gt;`)、各类按钮(`&lt;button&gt;`)及表单重置功能、无语义布局标签(`&lt;div&gt;` 和 `&lt;span&gt;`)以及字符实体的应用。此外,还提供了一个完整的注册信息表单案例,涵盖个人信息、教育经历和工作经历等部分,展示了如何综合运用上述元素构建实用的表单。
【前端web入门第二天】03 表单-下拉菜单 文本域 label标签 按钮 【附注册信息综合案例】
前端开发:从零到一构建响应式网页
【10月更文挑战第1天】前端开发:从零到一构建响应式网页
74 2
|
5月前
|
前端基础(十)_标签分类(行级标签、块级标签、行块标签)
本文阐述了HTML标签的分类,包括行级标签、块级标签和行块标签,并展示了如何使用CSS的display属性实现标签类型之间的转换。
127 3
|
5月前
|
前端基础(二)_HTML常用标签(块级标签、行级标签、行块级标签)
本文详细介绍了HTML中的常用标签,包括块级标签(如`h1`至`h6`、`p`、`div`等)、行级标签(如`span`、`b`、`strong`、`i`、`em`、`sub`、`sup`、`del`、`a`等),以及行块级标签(如`img`)。文章解释了这些标签的用途、特点和基本用法,并通过示例代码展示了如何在HTML文档中使用它们。
316 1
【前端web入门第一天】02 HTML图片标签 超链接标签 音频标签 视频标签
本文档详细介绍了HTML中的图片、超链接、音频和视频标签的使用方法。首先讲解了`&lt;img&gt;`标签的基本用法及其属性,包括如何使用相对路径和绝对路径。接着介绍了`&lt;a&gt;`标签,用于创建超链接,并展示了如何设置目标页面打开方式。最后,文档还涵盖了如何在网页中嵌入音频和视频文件,包括简化写法及常用属性。
88 13
使用 Vue.js 和 Vuex 构建响应式前端应用
【10月更文挑战第2天】使用 Vue.js 和 Vuex 构建响应式前端应用
45 0

热门文章

最新文章

  • 1
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    13
  • 2
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    25
  • 3
    详解智能编码在前端研发的创新应用
    16
  • 4
    巧用通义灵码,提升前端研发效率
    14
  • 5
    智能编码在前端研发的创新应用
    10
  • 6
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    12
  • 7
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    26
  • 8
    VSCode AI提效工具,通义灵码前端开发体验
    66
  • 9
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    10
  • 10
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    14
  • 1
    【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
    29
  • 2
    VSCode AI提效工具,通义灵码前端开发体验
    66
  • 3
    开箱即用的GO后台管理系统 Kratos Admin - 前端权限
    7
  • 4
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    36
  • 5
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    67
  • 6
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    31
  • 7
    巧用通义灵码,提升前端研发效率
    97
  • 8
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    149
  • 9
    详解智能编码在前端研发的创新应用
    107
  • 10
    智能编码在前端研发的创新应用
    85