网站关键词突然搜不到,wordpress访问很慢,wordpress作品集插件,网站建设的公司服务文章目录 前端中常用的单位度量vw/vh 的场景应用px/rem/em 之间的转换关系项目中的rem 应用根元素 font-size 设置为16px 的应用惯例自适应之图片应用1. 使用 max-width 和 max-height2. 使用 object-fit 属性3. 使用 background-image 模拟图片展示 前端中常用的单位度量
pxmax-width 和 max-height2. 使用 object-fit 属性3. 使用 background-image 模拟图片展示 前端中常用的单位度量
px像素 定义px是pixel的缩写它是一个绝对单位是屏幕上能显示的最小物理单位。例如在显示器上一个像素点就是一个px。应用场景 当需要精确控制元素的尺寸特别是在一些对布局精度要求较高的设计场景中如图标设计、小型组件按钮等的尺寸定义等。例如设计一个直径为30px的圆形图标这种情况下px可以很好地满足精确尺寸的要求。在一些固定布局的网页或者应用中比如简单的宣传页面其中的文字大小、图片尺寸等如果不需要根据设备屏幕大小自适应使用px来定义是比较方便的。 rpx响应式像素 定义rpx是微信小程序特有的单位它可以根据屏幕宽度进行自适应调整。规定屏幕宽度为750rpx这样在不同尺寸的手机屏幕上rpx会自动换算成对应的像素值。例如在iPhone 6中屏幕宽度为375px此时1rpx 0.5px在iPhone 6 Plus中屏幕宽度为414px1rpx的实际像素值会相应变化。应用场景 主要应用于微信小程序开发。在开发小程序界面时使用rpx可以让界面在不同型号的手机上保持相对一致的布局效果。比如设计一个小程序的列表项高度为80rpx那么不管是在小屏幕手机还是大屏幕手机上列表项的高度都会根据屏幕宽度自动适配不会出现布局错乱的情况。 rem根元素字体大小相对单位 定义rem是相对于根元素html字体大小来计算的单位。例如如果根元素html的字体大小设置为16px那么1rem 16px如果将根元素字体大小设置为20px1rem就等于20px。应用场景 常用于网页的响应式布局。通过设置根元素字体大小并根据rem来定义其他元素的尺寸可以很方便地实现整个页面的字号和元素大小的整体缩放。例如在一个网页中将根元素字体大小设置为10px然后将标题的字体大小定义为2rem那么标题的实际字体大小就是20px。当需要调整页面整体字号时只需要改变根元素的字体大小所有使用rem定义的元素尺寸都会相应改变。对于一些需要根据用户设置如浏览器字体大小设置来灵活调整布局的网页rem也是一个很好的选择。 em相对单位 定义em是相对于父元素字体大小来计算的单位。如果一个元素的父元素字体大小为16px那么对于这个元素来说1em 16px。它会继承父元素的字体大小属性。应用场景 在文本排版中当需要根据上下文的字体大小来设置相对比例的字号时可以使用em。例如在一个段落中正文的字体大小为16px1em想要设置其中引用部分的字体大小为正文的0.8倍就可以将引用部分的字体大小设置为0.8em。对于一些具有嵌套结构的文本内容em可以方便地实现字号的逐级缩放使得文本层次更加分明。不过由于它是相对于父元素的在复杂的布局中可能会因为多层嵌套而导致计算复杂需要谨慎使用。 vw视口宽度百分比单位 定义vw是viewport width的缩写表示视口宽度的百分比。1vw等于视口宽度的1%。例如在一个宽度为1000px的视口中1vw 10px。应用场景 用于创建完全自适应视口宽度的布局。比如在设计一个全屏的网页轮播图时可以将轮播图的宽度设置为100vw这样不管视口宽度如何变化轮播图都能铺满整个屏幕宽度。对于一些需要根据屏幕宽度按比例分配空间的模块布局vw是一个很好的选择。例如将一个网页的侧边栏宽度设置为30vw主内容区域宽度设置为70vw这样在不同屏幕宽度下两边的区域都能按照比例自适应。 vh视口高度百分比单位 定义vh是viewport height的缩写表示视口高度的百分比。1vh等于视口高度的1%。例如在一个高度为600px的视口中1vh 6px。应用场景 与vw类似主要用于自适应视口高度的布局。例如在设计一个高度自适应的单页应用SPA的页面时可以将页面的各个部分如导航栏、内容区、页脚等的高度用vh来定义使得页面在不同设备的屏幕高度下都能有良好的布局效果。在一些需要垂直方向自适应的场景如垂直滚动的长页面中的某些固定高度比例的模块使用vh可以方便地实现自适应。比如设置一个视频播放区域的高度为50vh这样它会始终占据屏幕高度的一半为用户提供一致的视觉体验。
vw/vh 的场景应用
网页布局设计 全屏模块布局 在创建全屏的网页页面时vw和vh单位非常有用。例如设计一个单页网站首页通常希望背景图或者背景色能够铺满整个屏幕。此时可以将body或相关的容器元素的高度设置为100vh宽度设置为100vw这样就能确保无论用户使用何种设备访问页面都能完全覆盖屏幕提供沉浸式的视觉体验。 分屏布局 当需要将页面划分为不同比例的部分时vw和vh可以很好地实现这个目标。比如要创建一个具有固定比例侧边栏和内容区域的网页布局。可以将侧边栏的宽度设置为30vw内容区域的宽度设置为70vw。在垂直方向上如果希望有一个固定高度的头部如导航栏和一个自适应剩余高度的内容区可以将导航栏的高度设置为20vh内容区的高度设置为80vh。这种布局方式能够在不同屏幕尺寸的设备上如桌面显示器、笔记本电脑、平板电脑和手机保持各部分的比例相对稳定。 响应式图片和视频展示 图片展示 在展示大型图片如产品图片、画廊图片等时为了让图片在不同设备上都能有较好的展示效果可以使用vw和vh单位来控制图片的尺寸。例如将图片的最大宽度设置为100vw这样图片就不会超出屏幕宽度避免用户需要水平滚动来查看完整的图片。如果希望图片在高度上也能自适应可以将其高度设置为与宽度成一定比例例如设置高度为70vw假设希望图片的宽高比为10:7这样图片就能根据屏幕宽度自动调整大小并且保持合适的比例。 视频播放 对于视频播放区域同样可以使用vw和vh来实现自适应。比如在一个在线课程网站或者视频分享平台上将视频播放器的宽度设置为90vw高度设置为50vh这样视频播放器能够在不同设备上占据合适的屏幕空间提供良好的观看体验。而且当用户旋转设备时视频播放器的尺寸也能根据新的视口尺寸自动调整。 移动应用和小程序布局部分情况 在一些基于WebView的移动应用或者小程序开发中如果希望界面能够更好地适配设备屏幕vw和vh单位也可以发挥作用。例如在一个混合式移动应用的某个页面中要设计一个信息展示卡片卡片的宽度可以设置为80vw高度根据内容和设计需求如设置为40vh来确定这样卡片在不同尺寸的手机屏幕上都能有合适的大小并且布局相对稳定。不过需要注意的是在移动原生应用开发中可能会有更适合的布局方式和单位但在某些特定场景下结合vw和vh可以提供额外的布局灵活性。 数据可视化和图表展示 在数据可视化领域例如制作柱状图、折线图、饼图等图表时vw和vh单位有助于图表在不同设备上的适配。如果希望图表能够自适应屏幕大小可以将图表的容器如div元素的宽度设置为90vw高度设置为70vh。这样无论是在大屏幕的监控显示器还是小屏幕的移动设备上图表都能根据视口大小自动调整尺寸保证数据能够清晰地展示同时也不会因为尺寸问题而导致布局混乱。
px/rem/em 之间的转换关系
px与rem的转换关系 基本原理rem是相对于根元素html字体大小来计算的单位。假设根元素html的字体大小设置为 F F Fpx那么 1 1 1rem F F Fpx。例如如果根元素字体大小是 16 16 16px那么 1 1 1rem就等于 16 16 16px。转换公式若要将px转换为rem公式为 r e m p x 根元素字体大小 p x rem \frac{px}{根元素字体大小px} rem根元素字体大小pxpx。例如一个元素的宽度是 32 32 32px根元素字体大小为 16 16 16px那么这个元素的宽度用rem表示就是 32 ÷ 16 2 32\div16 2 32÷162rem。反之若要将rem转换为px公式为 p x r e m × 根元素字体大小 p x px rem\times根元素字体大小px pxrem×根元素字体大小px。 px与em的转换关系 基本原理em是相对于父元素字体大小来计算的单位。设父元素字体大小为 P P Ppx那么对于该父元素下的子元素 1 1 1em P P Ppx。例如父元素字体大小为 12 12 12px那么子元素的 1 1 1em就是 12 12 12px。转换公式若要将px转换为em公式为 e m p x 父元素字体大小 p x em\frac{px}{父元素字体大小px} em父元素字体大小pxpx。例如一个元素的字体大小是 18 18 18px其父元素字体大小为 12 12 12px那么这个元素的字体大小用em表示就是 18 ÷ 12 1.5 18\div12 1.5 18÷121.5em。反过来若要将em转换为px公式为 p x e m × 父元素字体大小 p x px em\times父元素字体大小px pxem×父元素字体大小px。 em与rem的转换关系复杂情况 没有嵌套关系的简单情况如果元素没有嵌套或者所有元素的父元素字体大小都和根元素字体大小相同那么em和rem可以简单地进行转换。例如根元素html字体大小为 16 16 16px此时 1 1 1rem 1 1 1em。嵌套情况下假设根元素字体大小为 F F Fpx某元素的父元素字体大小为 P P Ppx。该元素用em表示的尺寸为 E E Eem转换为rem的公式为 r e m E × P F rem\frac{E\times P}{F} remFE×P。例如根元素字体大小为 16 16 16px一个元素的父元素字体大小为 12 12 12px这个元素的字体大小为 1.5 1.5 1.5em转换为rem就是 1.5 × 12 16 1.125 \frac{1.5\times12}{16}1.125 161.5×121.125rem。
项目中的rem 应用
网页字体大小设置 整体字号控制 在网页开发中通过将根元素html的字体大小设置为一个相对合理的值如10px或16px然后使用rem单位来定义其他元素的字体大小。例如对于网页中的标题元素h1可以将其字体大小设置为2rem如果根元素字体大小为16px那么h1的字体大小就是32px。这样当需要调整整个网页的字体大小时只需改变根元素的字体大小所有基于rem定义的字体大小都会相应地改变实现了网页字体大小的整体缩放方便用户根据自己的喜好或者设备的显示情况如视力不好的用户可能希望增大字体进行调整。 不同级别标题字号设置 可以根据文档结构和设计需求使用rem为不同级别的标题设置字号。例如h1设置为2remh2设置为1.6remh3设置为1.3rem等形成一个层次分明的标题字号体系。这样在不同的页面或者模块中标题的字号比例关系保持一致有助于提高网页内容的可读性和视觉层次。 网页布局尺寸定义 容器尺寸设定 对于网页中的各种容器元素如div、section等使用rem来定义它们的宽度和高度是实现响应式布局的一种有效方式。例如设计一个内容区域将其宽度设置为60rem如果根元素字体大小为10px那么这个内容区域的宽度就是600px。当根元素字体大小改变时内容区域的宽度也会随之改变从而适应不同屏幕尺寸和用户偏好。 组件尺寸调整 在网页组件如按钮、输入框等的开发中rem单位可以确保组件在不同的页面环境下保持合适的大小。例如设计一个按钮其宽度为1.5rem高度为0.8rem按钮内文字大小为0.6rem。这样按钮的尺寸和文字大小会根据根元素字体大小进行自适应调整无论是在大屏幕还是小屏幕设备上按钮的比例和可读性都能得到较好的保证。 响应式网页适配不同设备 适配多种屏幕分辨率 随着移动设备的多样化屏幕分辨率也各不相同。使用rem单位可以方便地让网页在不同分辨率的设备上进行适配。例如在桌面浏览器上根元素字体大小可能设置为16px而在移动设备上通过媒体查询media可以将根元素字体大小调整为10px。这样基于rem定义的所有元素尺寸都会相应地在移动设备上变小实现了网页从桌面到移动设备的自适应转换避免了在小屏幕设备上出现布局混乱或者元素过大的问题。 适配不同的设备方向 当用户旋转设备如从竖屏变为横屏时网页布局也需要相应地调整。通过rem单位和适当的媒体查询可以根据设备的方向改变根元素的字体大小进而调整网页中所有元素的尺寸。例如在竖屏时根元素字体大小为10px当设备旋转为横屏时可以将根元素字体大小增加到12px使得网页中的元素在横屏模式下能够更好地利用屏幕空间同时保持布局的合理性。
根元素 font-size 设置为16px 的应用惯例
浏览器默认设置的影响 大多数浏览器的默认font - size值是16px。这是一种行业惯例用户在浏览网页时已经习惯了这种默认的文字大小。如果将根元素font - size定义为16px在没有特别设置其他元素字体大小的情况下网页的文本呈现会比较符合用户的预期不需要用户进行额外的缩放操作来正常阅读内容。 计算方便性 16px是一个相对容易计算的数值。在进行rem单位和px单位之间的转换时如果根元素font - size为16px那么1rem 16px。例如将一个元素的字体大小设置为2rem很容易计算出它的实际字体大小是32px 2 × 16 32 2\times16 32 2×1632。这种简单的倍数关系方便了开发者在设计网页布局和字体大小时进行快速的换算和调整。 响应式设计的灵活性 在响应式网页设计中以16px作为根元素font - size的起始值能够方便地通过媒体查询media来调整字体大小。例如当屏幕尺寸变小如从桌面端切换到移动端时可以通过媒体查询将根元素font - size按比例减小如设置为12px或10px。基于rem单位的其他元素尺寸和字体大小也会相应地按比例缩小从而实现了网页在不同设备上的自适应布局同时保持了相对合理的文字显示效果。 与其他单位的兼容性 在和其他单位如em结合使用时如果根元素font - size为16px可以更好地协调不同单位之间的关系。因为em是相对于父元素字体大小的单位而在没有特别设置父元素字体大小的情况下很多元素会继承根元素的字体大小特性。这样在使用rem和em进行布局和字体大小设置时可以更容易地理解和控制它们之间的相互作用减少因为单位换算混乱而导致的布局问题。
自适应之图片应用
要实现图片自适应展示、保证图片显示不变形、等比缩放且居中展示可以使用CSS来实现。以下是几种常见的方法
1. 使用 max-width 和 max-height
!DOCTYPE html
html langenheadmeta charsetUTF - 8meta nameviewport contentwidthdevice-width, initial-scale 1.0styleimg {max - width: 100%;max - height: 100%;display: block;margin: 0 auto;}/style
/headbodyimg srcyour-image-url.jpg alt示例图片
/body/html原理max - width: 100% 确保图片宽度不会超过其父容器的宽度max - height: 100% 确保图片高度不会超过其父容器的高度。display: block 将图片转换为块级元素margin: 0 auto 使图片在水平方向上居中显示。
2. 使用 object-fit 属性
!DOCTYPE html
html langenheadmeta charsetUTF - 8meta nameviewport contentwidthdevice-width, initial-scale 1.0style.img-container {width: 100%;height: 400px;/* 设置一个固定高度也可以根据需求调整 */display: flex;justify-content: center;align-items: center;}img {width: 100%;height: 100%;object-fit: contain;}/style
/headbodydiv classimg-containerimg srcyour-image-url.jpg alt示例图片/div
/body/html原理object-fit: contain 会保持图片的纵横比并将图片缩放到在指定的容器内尽可能大同时保证图片的完整显示。通过设置父容器.img-container的 display: flexjustify-content: center 和 align-items: center实现图片在父容器内水平和垂直居中。
3. 使用 background-image 模拟图片展示
!DOCTYPE html
html langenheadmeta charsetUTF - 8meta nameviewport contentwidthdevice-width, initial-scale 1.0style.img - container {width: 100%;height: 400px;background - image: url(your-image-url.jpg);background - size: contain;background - position: center;background - repeat: no - repeat;}/style
/headbodydiv classimg-container/div
/body/html原理background-size: contain 使背景图片在保持纵横比的情况下尽可能大同时完全适应容器。background-position: center 将背景图片在容器内居中显示background-repeat: no-repeat 确保图片不会重复显示。这种方法适用于不需要对图片添加HTML元素交互如点击链接等的场景。
