什么是自适应

一套代码，可以根据屏幕大小，以合理的样式出现在手机，ipad，pc。
总所周知Bootstrap可以实现页面自适应布局，在不添加Bootstrap的情况下，使用@media 也可以实现页面的自适应布局。

怎么使用@media语法

根据不同宽度，选择不同的样式，screen是告知设备在打印页面时使用衬线字体

大于1000px
```
@media screen and (min-width:100px){}
```

小于1000px大于500px

@media screen and (min-width:500px) and (max-width:1000px){}

小于500px
```
@media screen and (max-width:960px){}
```

竖屏

@media screen and (orientation: portrait) and (max-width: 1000px){}

横屏

@media screen and (orientation: landscape) and (max-width: 1000px){}

width
浏览器可视宽度
device-width

设备屏幕的宽度

补充

display: none
隐藏页面元素
display: inline-block
显示为内联块元素
块级元素(block)：总是独占一行
div/h1/h1/h3/h4/hr/ol/ul/li…
内联元素(inline)：和相邻的内联元素在同一行
b/img/input/label/select/span…

示意图

代码

安装VSCode，这个官网有
安装live-server 插件，可以时时监控页面变化
输入！生成html模板，viewport 是网页默认宽高，下面代码指默认页面宽度为屏幕宽度。这个代码是为自适应做准备
```
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
```
不能使用px，页面样式会根据页面变化，最好用 % | em | vh

Html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 设置IE渲染 --><meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1"><link rel="stylesheet" href="css/5.css"><title>media</title>
</head><body><div class="box one">max-width: 500px red</div><div class="box two">min-width: 500px& max-width: 1000px yellow</div><div class="box three">min-width: 1000px green</div><div class="box iphone">iPhone: 375px grey</div><p class="view"><strong>Your current viewing area is:</strong><span class="lt500">lt500</span><span class="bt500-1000">between 500 - 1000px</span><span class="gt1000">gt1000</span></p>
</body></html>

Css

.box {border: solid 1px black;margin: 50px;padding: 10px 10px;
}span {display: none;
}@media screen and (max-width: 500px) {.one {background: red;}.lt500 {display: inline-block;}
}@media screen and (min-width: 500px) and (max-width: 1000px) {.two {background: yellow;}.bt500-1000 {display: inline-block;}
}@media screen and (min-width: 1000px) {.three {background: green;}.gt1000 {display: inline-block;}
}/* max device width */
@media screen and (max-device-width: 480px) {.iphone {background: #ccc;}
}

本节代码地址

还做了一个自适应的blog demo，原理和这个一样，大家感兴趣的可以直接看demo6
示意图：

[HTML_CSS]@media 实现页面自适应布局相关推荐

移动端h5框架自适应_Html5移动端页面自适应百分比布局
按百分比布局,精度肯定不会有rem精确 Document * { padding: 0; margin: 0; } .one { width: 20%; height: 100px; float: l ...
网站页面自适应的实现方式
网站页面自适应布局自适应不同屏幕方式简易场景页面居中,元素宽度使用百分比匹配复杂场景 1.可以编写几套css代码,再利用媒体查询技术,在不同屏幕下显示加载不同代码,代码工作量大,但比较好维护 ...
html自适应布局视频,2018年最新的8个响应式与自适应视频教程推荐
在学习前端的过程中经常可以看到自适应布局和响应式布局,那么,什么是响应式布局?自适应布局又是什么呢?响应式布局设计就是一个网站能够兼容多个终端-而不是为每个终端做一个特定的版本:自适应布局设计是能使网 ...
谈谈利用JavaScript结合相对单位rem实现自适应布局的简单而实用的方法
谈谈利用JavaScript结合相对单位rem实现自适应布局的简单而实用的方法 rem是css3新增的一个相对单位,相对的只是HTML根元素,可以只修改根元素字体大小就可以成比例地调整所有字体大小.我 ...
css3 calc()自适应布局属性 ---浏览器版本兼容性的问题
"无意中发现了一个巨牛的人工智能教程,忍不住分享一下给大家.教程不仅是零基础,通俗易懂,而且非常风趣幽默,像看小说一样!觉得太牛了,所以分享给大家.点这里可以跳转到教程." 我们想 ...
手机端页面自适应解决方案—rem布局进阶版
旧版rem布局 <手机端页面自适应解决方案-rem布局>, 此方案仅适用于移动端web 文章底部常见问题说明第四条,笔者已给出一个相当便捷的解决方案,欢迎留言交流.(2017/9/9) 该 ...
利用 @media screen 实现网页布局的自适应,@media screen and
利用 @media screen 实现网页布局的自适应,@media screen and 开始研究响应式web设计,CSS3 Media Queries是入门. Media Queries 其作用就 ...
移动端自适应布局和响应式页面兼容移动端布局
上篇博客讲到了移动端的常用布局模式之一:Flex布局,这篇博客咱们来了解一下移动端的另外两种布局--移动端自适应布局和响应式页面兼容移动端布局. 目录一.移动端自适应布局 1.rem 什么是rem ...
【手写一个页面自适应】媒体查询布局视口rem/em
手写的一个页面自适应字体只需要引入这个JavaScript文件就行.文末有更好的自适应方法. // 手动写页面自适应字体 window.onload = function () {function ...

[HTML_CSS]@media 实现页面自适应布局

目录

什么是自适应

怎么使用@media语法

补充

示意图

代码

本节代码地址

[HTML_CSS]@media 实现页面自适应布局相关推荐

最新文章

热门文章