html中内容大小变化,纯css实现内容根据容器的宽度的改变而改变-CSDN博客

本文探讨了HTML和CSS在创建响应式网页布局中的应用，包括使用vw和vh单位实现全屏布局，以及通过justify-content、font设置和text-rendering优化文本显示。还介绍了如何利用flexbox进行元素对齐和溢出隐藏，以及在不同屏幕尺寸下调整元素宽度的过渡效果。

摘要由CSDN通过智能技术生成

html {

width:100vw;

height:100vh;

}

body {

width:100vw;

height:100vh;

justify-content:center;

font:23px/36px '21Cent-Regular',Georgia,serif,Helvetica Neue,Arial;

font-feature-settings:"lnum" 0,"onum";

-webkit-font-smoothing:subpixel-antialiased;

text-rendering:optimizelegibility;

}

.demo {

margin-top:18px;

box-sizing:border-box;

text-align:left;

width:756px;

max-width:100%;

overflow:visible;

position:relative;

cursor:text;

padding:50px;

}

.example > input {

vertical-align:middle;

margin:-0.2em 0 0;

cursor:pointer;

}

.example > label {

cursor:pointer;

}

.wrapper {

resize:horizontal;

overflow:hidden;

box-sizing:border-box;

width:100%;

padding:0.5em 1em;

border:1px solid;

transition:width 1.5s;

margin-top:10px;

}

.heading {

margin:0;

text-align:center;

line-height:1;

word-wrap:break-word;

-webkit-font-smoothing:antialiased;

-moz-osx-font-smoothing:grayscale;

}

.menu {

display:flex;

margin:0;

padding:0;

justify-content:space-around;

}

.menu-item {

flex-shrink:1;

overflow:hidden;

min-width:2em;

padding:0 0.5em;

text-align:center;

text-shadow:0 1px #FFF;

margin:0;

}

.menu-item:before {

display:none;

}

.menu-item a {

padding:.3em 0 .287em;

cursor:pointer;

color:#0985ce;

text-decoration:none;

}

.menu-item a:hover {

color:#8c64b4;

}

.overflower {

display:inline-flex;

flex-wrap:wrap;

overflow:hidden;

box-sizing:border-box;

max-width:100%;

height:1.5em;

line-height:1.5em;

white-space:nowrap;

text-overflow:ellipsis;

}

.overflower-short {

display:block;

overflow:hidden;

flex-grow:1;

width:0;

text-overflow:ellipsis;

}

.overflower-long {

flex-basis:100%;

display:inline;

}

[overflower-text]:after {

content:attr(overflower-text);

}

:checked + label + .wrapper {

width:30% !important;

}

.overflower {

line-height:1.5em;

display:inline-block;

overflow:hidden;

box-sizing:border-box;

max-width:100%;

height:1.5em;

white-space:nowrap;

text-overflow:ellipsis;

}

.overflower-long {

display:inline;

}

.overflower-short {

display:none;

}

@supports (flex-wrap:wrap) {

.overflower {

display:inline-flex;

flex-wrap:wrap;

}

.overflower-short {

display:block;

overflow:hidden;

width:0;

text-overflow:ellipsis;

flex-grow:1;

}

.overflower-long {

flex-basis:100%;

}