打造自适应网站只用一个 CSS 属性就够了

更新日期: 2020-10-04阅读: 1.5k标签: 自适应

用一个css属性创建一个响应式网站,让我们来看看它是如何做到的。以这个模板为例,没有应用css属性。


使用 clamp() CSS函数,我们可以创建仅具有一个属性的响应式网站。

现在添加魔术CSS

clamp(minimum, preferred, maximum);

在这里!你已经完成了



说明

clamp() 的工作原理是“夹紧”或限制一个灵活的值,使其处于最小和最大范围之间。

使用方法如下:

  1. minimum 最小值:例如 16px
  2. flexible 弹性值:例如 5vw
  3. maximum 最大值:例如 34px
h1 {
  font-size: clamp(16px, 5vw, 34px);
}

在此示例中,仅当该值大于 16px 且小于 34px 时, h1 字体大小值将为视口宽度的 5% 。

例如,如果你的视口宽度是 300px ,你的 5vw 值将等于 15px ,但是,你将该字体大小值限制为最小 16px ,因此这就是将要发生的情况。

另一方面,如果你的视口宽度为 1400px ,则 5vw 将高达 70px !但幸运的是,你将该最大值限制为 34px ,因此它不会超过该值。

在线Demo:https://dip15739.github.io/ResponsiveWebsite-CSSproperty/

我可以为此模板添加此代码...

img {
  width: clamp(15vw, 800%, 100%);
}
h1 {
  font-size: clamp(20px, 5vw, 35px);
}
p {
  font-size: clamp(10px, 4vw, 20px);
}

而从字面上看,接受任何其他长度、频率、角度、时间、百分比、数字或整数的属性。


原文:https://dev.to/dip15739/responsive-website-with-only-1-css-property-3ea9
作者:Dip Vachhani


链接: https://fly63.com/article/detial/9818

html中map area 热区自适应的原生js实现方案

在做自适应网页的时候,如果在图片中使用了热区map。图片可以通过样式实现:图片大小随页面变化,MAP中每个area的坐标也随页面等比例的变化效果。根据分辨率自适应热区坐标

WKWebView加载的网页自适应大小

有时候在WKWebView加载页面后会发现页面的字会很小, 这是因为原网页没有做手机屏幕尺寸的适配, 那么在后台不做调整的情况下我们移动端怎样来适配页面呢?以下代码可以适配大小

iframe 自适应高度的多种实现方式

实现 iframe 的自适应高度,使其等于内嵌网页的高度,从而看不出来滚动条和嵌套痕迹。对于用户体验和网站美观起着重要作用。 如果内容是固定的,那么我们可以通过CSS来给它直接定义一个高度,同样可以实现上面的需求。

移动端自适应

js动态设置html的字体大小,设计稿宽度750px,设备宽度350px,此时HTML 的font-size:50px,及1rem=50px;设置html的font-size: 13.33vw,设置html的font-size并缩放页面

HTML+Css让网页自动适应电脑手机屏幕

在网页的<head>中增加以上这句话,可以让网页的宽度自动适应手机屏幕的宽度,其中:width=device-width :表示宽度是设备屏幕的宽度,height=device-height :表示宽度是设备屏幕的宽度

CSS实现自适应正方形、等宽高比矩形

利用vw、vh、vmin、vmax,vw表示的是viewport的宽度,也就是视口的宽度,vh表示的是视口的高度;利用双层嵌套来写,将外层的div的position设置relative,内层的position设置为absoult

echarts 表格自适应需要注意的问题

最近在做大屏可视化,页面数据展示基本都是用百度的echarts,因为页面要做自适应,所以当视窗变化的时候echarts也要变化。window.onresize 可以解决这个问题。而一般一个页面不可能只引用一个表格,当你引用多个的时候,有些地方需要注意。

css弹性盒模型实现元素宽度(高度)自适应

css实现左侧宽度固定右侧宽度自适应:定位、浮动、margin;css3弹性盒模型实现自适应:上下高度固定中间高度自适应、左侧宽度固定右侧宽度自适应

web页面实现等比例缩放自适应 - 通过 rem 和 vw 实现

rem 是相对长度单位,是指相对于根元素(即html元素)font-size(字号大小)的倍数;vw 是相对长度单位,相对于浏览器窗口的宽度,浏览器窗口宽度被均分为100个单位的vw,rem 和 vw 结合实现WEB页面等比例缩放自适应

vuejs中拖动改变元素宽度实现宽度自适应大小

拖动效果的实现基本都是dom操作来实现的,通过拖动分隔线,计算分隔线与浏览器边框的距离(left),来实现拖动之后的不同宽度的计算;当拖动分隔线1时,计算元素框left和mid;当拖动分隔线2时

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!