分辨率兼容学习笔记

AriesTina

已于 2022-11-02 23:05:07 修改

阅读量208

点赞数 1

文章标签：学习 css html

于 2022-11-02 22:52:03 首次发布

本文链接：https://blog.csdn.net/AriesTina/article/details/127660944

版权

一种简单的自适应布局：

缺点：在断点处，页面跳变的很突兀。属于自适应布局吧。要用@media区分三种分辨率情况。
当窗口大于1024px 时，只会被压缩，并不会发生其他变化
@media screen and (max-width:1024px) {
body {
background-color: red;
}
}
* {
margin: 0;
padding: 0;
text-align: center;
color: yellow;
}
.header {
width: 100%;
height: 100px;
background: #ccc;
line-height: 100px;
}
.main {
background: green;
width: 100%;
}
.clearfix:after {
display: block;
height: 0;
content: “”;
visibility: hidden;
clear: both;
}
.left,
.center,
.right {
float: left;
}
.left {
width: 20%;
background: #112993;
height: 300px;
font-size: 50px;
line-height: 300px;
}
.center {
width: 60%;
background: #ff0;
height: 400px;
color: #fff;
font-size: 50px;
line-height: 400px;
}
.right {
width: 20%;
background: #f0f;
height: 300px;
font-size: 50px;
line-height: 300px;
}
.footer {
width: 100%;
height: 50px;
background: #000;
line-height: 50px；
}
当窗口小于1024px，大于720px的时候，右侧栏取消浮动，在下边显示：

.right {
float: none;
width: 100%;
background: #f0f;
clear: both;
}
.left {
width: 30%;
background: red;
}
.center {
width: 70%;
background: yellow;
}
.main {
height: 800px;
/* background: blue; */
}
当窗口小于720px的时候，左中右三栏，全都取消浮动，宽度100%：
.left,
.center,
.right {
float: none;
width: 100%;
}

// 1.使用 @media 实现
@media 类型 and (条件1) and (条件二) {
css样式
}

// 2.使用@import导入
@import url(“css/moxie.css”) all and (max-width:980px);

// https://blog.csdn.net/u014490083/article/details/79164235

rem实现自适应布局

这个是最简单，但其他项目用的不多，具体有什么坑待踩todo

参考：http://caibaojian.com/web-app-rem.html

rem能等比例适配所有屏幕？？？

rem是如何工作的？
rem是通过根元素进行适配的，网页中的根元素指的是html我们通过设置html的字体大小就可以控制rem的大小

方法1：通过JS去动态计算根元素的font-size，这样的好处是所有设备分辨率都能兼容适配。
淘宝首页目前就是用的JS计算
怎么计算不同宽度下font-site的值？
举个例子：384/640 = 0.6，384是640的0.6倍，所以384页面宽度下的font-size也等于它的0.6倍，这时384的font-size就等于12px。

方法2：

一般我们在做web app都会先统计自己网站有哪些主流的屏幕设备，然后去针对那些设备去做media query设置也可以实现适配，例如下面这样：

html {
font-size : 20px;
}

@media only screen and (min-width: 401px){
html {
font-size: 25px !important;
}
}
@media only screen and (min-width: 428px){
html {
font-size: 26.75px !important;
}
}
@media only screen and (min-width: 481px){
html {
font-size: 30px !important;
}
}
@media only screen and (min-width: 569px){
html {
font-size: 35px !important;
}
}
@media only screen and (min-width: 641px){
html {
font-size: 40px !important;
}
}

viewport实现？？？

#layout{
display: block;
flex-direction: column;
width: 80%;
margin: 0 auto;
height: 2rem;
}

#top{
width: 100%;
flex: 0 0 50px;
margin: 0 auto;
background-color:yellow ;
height: 2rem;
}

#main{
flex: 0 0 100%;
}

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="widthdevice-width, initial-scale=1.0, user-scable=0">
    <title>分辨率兼容</title>
    <link href="./big.css" rel="stylesheet" media="(min-device-width:100px)">
    <!-- <link href=".small.css" rel="stylesheet" media="(min-device-width:400px) and (max-device-width:600px)"> -->
</head>

<body>
    <div id="layout"></div>
    <div id="top"></div>
    <div id="main">
        <div>
            <li>分类1</li>
            <li>分类1</li>
            <li>分类1</li>
            <li>分类1</li>
            <li>分类1</li>
            <li>分类1</li>
        </div>
        <div>
            <li>图片1</li>
            <li>分类1</li>
            <li>分类1</li>
            <li>分类1</li>
            <li>分类1</li>
            <li>分类1</li>
        </div>
    </div>
</body>

</html>

左右两列自适应布局

代码如下

html{
font-size: 20px;
/* font-size: 40px; */
}
/2列固定宽度/
#left {
background-color: #cccccc;
border: 2px solid #333333;
width: 300px;
height: 300px;
float: left;
}

#right {
background-color: #cccccc;
border: 2px solid #333333;
width: 300px;
height: 300px;
float: left;
}

/2列自适应宽度/
#left-self-adaption {
background-color: red;
border: 2px solid #333333;
width: 20%;
height: 300px;
float: left;
/* font-size: 3rem; /
/ vh 会随浏览器高度，字体大小变化 /
/ font-size: 5vh; */
font-size: 1.2rem;
}

#right-self-adaption {
background-color: blue;
border: 2px solid #333333;
width: 70%;
height: 300px;
float: left;
/* font-size: 3rem; /
/ font-size: 5vh; */
font-size: 1.2rem;
}