关于前端:前端页面高度和宽度自适应怎么做

在前端页面开发中，咱们会心愿页面能够依据不同用户的显示比例主动缩放页面，确保用户体验，这就是 PC 自适应，上面小千就来给大家介绍一下应该怎么做和集中常见的问题解决方案，记得珍藏起来遇到问题来看一看。

  自适应的长处：元素自适应在网页布局中十分重要，它可能使网页显示更灵便，能够适应在不同设施、不同窗口和不同分辨率下显示。宽度自适应

  元素宽度设置为 100%。（块元素宽度默认为 100%），或者不设置宽度（width）;（宽度是父元素的宽度）高度自适应

  1) 自适应元素高度：height:auto; 或者不设置;（是子元素撑开父元素的高度）2) 元素高度自适应窗口高度，设置办法：html,body{height:100%;}

  注：如果设置子元素的高度追随父元素的高度变动而变动，那么父元素必须有游戏高度。最小高度的自适应

  min-height 属性：最小高度；(IE6 浏览器不辨认该属性)

  hack1:min-height:value;_height:valuewww.sangpi.com hack2:min-height:value; height:auto!important;height:value;

  浮动元素父元素高度自适应（高度塌陷）当子元素有浮动并且父元素没有高度的状况下父元素会呈现高度塌陷

  高度塌陷的解决办法

  hack1：给父元素增加申明 overflow:hidden;(触发一个 BFC)

  hack2: 在浮动元素下方增加空 div, 并给该元素增加

  申明：div{clear:both; height:0; overflow:hidden;}

  hack3: 万能革除浮动法

1

  visibility:hidden/ 暗藏

  visibility:hidden; 和 display:none; 的区别：visibility:hidden; 属性会使对象不可见，但该对象在网页所占的空间没有扭转，等于留出了一块空白区域，而 display:none 属性会使这个对象彻底隐没不显示，也不再占用地位。伪对象选择符

  1）、::after : 与 content 属性一起应用，定义在对象后的内容。语法：选择符:：after{content:”文字”;}

  选择符:：after{content:url( 图片门路)；}

  如：div::after{content:url(logo.jpg);}

  div::after{content:"文本内容";}

  2）、::before: 与 content 属性一起应用, 定义在对象前的内容。div::before{content:"在其前放内容";}

  3）、::first-letter 定义对象内第一个字符的款式。阐明：*(该伪元素只能用于块级元素)

  4）、::first-line: 定义对象内第一行的款式。*(该伪元素只能用于块级元素。)

  以上就是对于前端页面宽高自适应的介绍了，心愿能帮到大家。