首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

第118天:移动端开发——视口

CSS像素:为Web开发者创造CSS(和JavaScript)中使一个抽象层。 说明一下:web开发过程中,我们基本使用都是CSS像素,设备像素基本不会用。...当用户放大越大,一个CSS像素覆盖设备像素就越多,因此这个元素不一定会跨越css设置等值设备像素。屏幕上,当缩放程度为100%时,一个CSS像素等于一个设备像素。...高密度屏幕上,例如苹果视网膜屏幕,一个CSS像素跨越了多个设备像素。对照下图: (红色表示CSS像素、蓝色表示设备像素) ? 我们开发中,操作CSS像素,让CSS像素去覆盖设备像素。...所以,移动端浏览器厂商必须保证即使屏幕下我们页面可以展示很好,他们将视口宽度设计得比屏幕宽度出很多。这样。移动端,视口与移动端浏览器屏幕宽度就不再关联,而是完全独立了。...它和设备屏幕一样,并且它CSS像素数量会随着用户缩放而改变。 3、理想视口 布局视口默认宽度并不是一个理想宽度。显然用户希望进入页面时可以不需要缩放就可以有一个理想浏览和阅读尺寸。

93020

Web前端学习笔记之BootStrap

背景颜色 ... ... ......用到技术: CSS3@media查询 用于查询设备是否符合某一特定条件,这些特定条件包括屏幕尺寸、是否可触摸、屏幕精度、横屏竖屏等信息。...常见属性: device-width, device-height 屏幕、高 width,height 渲染窗口、高 orientation 设备方向 resolution 设备分辨率 语法: @media..."(viewport)中,通常这个虚拟"窗口"(viewport)比屏幕,这样就不用把每个网页挤到很小窗口中(这样会破坏没有针对手机浏览器优化网页布局),用户可以通过平移和缩放来看网页不同部分..., initial-scale=1, maximum-scale=1″> width:控制 viewport 大小,可以指定一个值,如果 600,或者特殊值, device-width 为设备宽度

2.8K20

H5移动端开发学习总结

中使一个抽象层。...但当在高密度屏幕上,例如苹果视网膜屏幕,一个CSS像素跨越了多个设备像素。如果用户缩小到足够程度,一个CSS像素会变得明显比一个设备像素小。...这个width为200px元素跨越了200个CSS像素。而200个CSS像素相当于多少个设备物理像素取决于屏幕特性(是否是高密度)和用户进行缩放。...例如:苹果视网膜屏幕上,视网膜屏幕像素密度是普通屏幕两倍,那么这个元素就跨越了400个设备物理像素。如果用户放大,它将跨越更多设备物理像素。...###位图像素### 一个位图像素是栅格图像(:png, jpg, gif等)最小数据单元。每一个位图像素都包含着一些自身显示信息(:显示位置,颜色值,透明度等)。

94720

【Java 进阶篇】深入了解 Bootstrap 全局 CSS 样式

本文中,我们将深入探讨 Bootstrap 全局 CSS 样式,适合初学者,帮助他们更好地理解和应用这些样式。 什么是全局 CSS 样式?...全局 CSS 样式是应用于整个网站或应用程序样式,它们定义了基本排版、颜色、间距、字体和其他外观特征。...背景和颜色 Bootstrap 全局 CSS 样式还包括一些用于设置背景和颜色类。以下是一些常见背景和颜色样式: bg-primary、bg-secondary:用于设置不同颜色背景。...text-primary、text-danger:用于设置不同颜色文本颜色。 示例代码: 这是一个蓝色背景文本。...Bootstrap 使用断点(breakpoint)来定义不同屏幕尺寸上样式变化。 以下是一些常见断点类: d-none、d-sm-none、d-md-none:用于不同屏幕尺寸上隐藏元素。

29120

为什么我们不擅长 CSS

虽然有大量优秀 CSS 实践者分享他们知识( Stephanie Eckles、Kevin Powell 和 Adam Argyle 等),但很多人在大学或训练营中学习 HTML 和 CSS,而这些人知识可能并不渊博...我们不给开发人员提供允许他们应用任何颜色实用类(例如 .bg-slate-100 ),我们只希望特定上下文中使用特定颜色。...(flex)工具中使CSS自定义属性,以便从我们设计系统中提供一些常见默认值。...包含我们引用块(blockquote)和图像标题(figcaption)容器应用了一些内边距(padding),同时元素之间也有一些外边距(margin),并且屏幕文本是居中。...然后我们需要一种用于大文本文字样式,以及我所说“柔和文本”样式——这种文本使用较低对比度颜色来表示其重要性降低,而不是通过调整字体大小或字体粗细来实现。

16110

常用CSS样式

自己平时整理一些常用 CSS 样式 设置透明度 IE6中使用 filter: alpha(opacity = 40); 在其他浏览器中使用 opacity: 0.4; 设置行高 /*\9表示兼容所有的...khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; 使用绝对定位将子元素高设置成父元素一样....parent { display: flex; justify-content: center; align-items: center; } 隐藏溢出标签中文本并且标签最后增加一个省略号...) md 中等屏幕 桌面显示器 (≥768px) lg 大屏幕 大桌面显示器 (≥992px) xl 超大屏幕 (≥1200px) xxl 超级大屏幕 (≥1600px) 设置标签高度为浏览器窗口高度...转载请注明: 【文章转载自meishadevs:常见CSS样式兼容性写法】

64030

css3学习笔记

适合初学者以及没看过css3的人快速了解css3主要内容。...1.opacity ----------------------取值0-1之间,给整个元素和其所有子元素设置透明度级别 2.css选择器----------------------http://www.w3school.com.cn...(1个PX相当于一个轮廓) ,颜色 5.多出文本隐藏和显示 overflow:hidden;text-overflow:ellipsis; hover 伪类加上overflow...渐变可以用rgba颜色值 9.多重背景 background-image:url(bg_flower.gif),url(bg_flower_2.gif); 可添加多个URL,放置图片 background-size...;填充方式,默认是auto,从左往右一次填充, balance是每个栏目基本内容填充都差不多 column-span:3;栏目设置,可以设置某个栏目中元素,所跨栏目数 16.流动布局

90650

Bootstrap基础学习笔记

每列左右间隙各15px .col-{1到12} 定义在所有屏幕 .col-{sm|md|lg|xl}-{1到12} 定义指定屏幕下该列占据,sm:屏幕>=576px、md:屏幕>=720px...、lg:屏幕>=960px、xl:屏幕>=1200px .offset-{1到11} 在所有屏幕列偏移 .offset-{sm|md|lg|xl}-{1到11} 指定屏幕列偏移 【显示隐藏】....d-none 较小屏幕下隐藏 .d-{sm | md | lg | xl}-none 指定屏幕大小下隐藏 .d-block 较小屏幕下显示 .d-{sm | md | lg | xl}-block...指定屏幕大小下显示 【常用背景颜色】 .bg-primary 重要背景颜色 .bg-success 执行成功背景颜色 .bg-info 信息提示背景颜色 .bg-warning 警告背景颜色 ....bg-danger 危险背景颜色 .bg-secondary 副标题背景颜色 .bg-dark 深灰背景颜色 .bg-light 浅灰背景颜色 【文字常用标签】 、、、<h4

4.8K31

css3学习笔记

1.opacity ----------------------取值0-1之间,给整个元素和其所有子元素设置透明度级别 2.css选择器----------------------http://www.w3school.com.cn...相当于一个轮廓) ,颜色 5.多出文本隐藏和显示 overflow:hidden;text-overflow:ellipsis; hover 伪类加上overflow:hidden;...渐变可以用rgba颜色值 9.多重背景 background-image:url(bg_flower.gif),url(bg_flower_2.gif); 可添加多个URL,放置图片 background-size...;填充方式,默认是auto,从左往右一次填充, balance是每个栏目基本内容填充都差不多 column-span:3;栏目设置,可以设置某个栏目中元素,所跨栏目数 16.流动布局 flexbox...; grid-row:2;子元素选着第几行; grid-row-span:2;子元素选择跨越行数,当前行为起始; 18.清除 wrap-flow:both;排除 auto默认值,如果采用该值,周围文本不再环绕排除项区域

56320

C1 能力认证——Web基础

name="_______" content="CSDN,CSDN能力认证中心"/> keywords 移动端设备中想要定义视口宽度为屏幕宽度,请补全代码片段 text/css CSS背景属性 属性 属性值 说明 background-color 颜色值,rgb,rgba,十六进制表示等,设置为transparent表示背景透明 设置背景颜色.../bg.png'); background-size: ______; } cover CSS文本属性 现需要实现英文小写转大写,请补全代码片段...important规则 当你一个样式声明中使用!important规则时,这个样式将覆盖其他任何声明 !...可将元素转换为行内元素 ps: img元素为可替换元素,高是由其加载内容决定,可以使用CSS覆盖其高等样式 行内块级元素 综合块级元素与行内元素特性 不独占一行 元素高、内外边距均可设置,

3.3K40

高效地将 TailwindCSS 与 Nuxt 结合使用

将 SVG 图标与 TailwindCSS 结合使用 应用程序中使用 SVG 图标是一种常见做法。通过正确图标,我们可以为用户提供出色用户体验,并使应用程序更具吸引力和吸引力。...例如,我们想要来自 MingCute 集调色板图标,名称为palette-2-line,如以下屏幕截图所示: 为此,我们可以元素i-mingcute-palette-2-line上使用该类span...,遵循bg--背景颜色或text--<shade文本颜色语法,例如bg-sea-buckthorn-500和text-sea-buckthorn...该工具允许我们上传图像,它将以 TailwindCSS 格式生成四种主要调色板及其色调,如以下屏幕截图所示: 剩下就是将生成代码复制并粘贴到您tailwind.config.ts文件中,然后您就可以应用程序中使用调色板了...概括 本教程中,我们学习了如何在 Nuxt.js 应用程序中安装和配置 TailwindCSS。

39120

Tailwind CSS,值得2024年你一试吗?

模块化: 通过向HTML元素添加类,可以定义文本颜色、背景颜色、内边距、外边距等,这种模块化方法使得设计调整和扩展变得简单。...React集成示例 以下是一个React组件代码示例,展示了如何在React应用中使用Tailwind CSS来创建一个蓝色按钮,按钮上文本为白色。...优化构建时间: JIT模式下,Tailwind分析您HTML模板,并且只生成基于您标记中使必要CSS样式,这提供了更快构建时间。...控制精确度: 例如,Tailwind中,您需要通过组合不同实用类来精确定义按钮外观,文本颜色、背景和内边距。...例如,可以动态设置用户姓名文本颜色: 同样地,按钮也可以使用主颜色并通过变量控制不同透明度。

34210
领券