响应式网站如何实现?

小白航

已于 2022-06-06 11:53:30 修改

阅读量2.1k

点赞数 1

文章标签： html5 css 前端

于 2020-03-01 17:31:17 首次发布

本文链接：https://blog.csdn.net/ch246018/article/details/104594604

版权

梳理一个小知识点。什么是响应式布局?我的理解是就是一套代码让他在不同的分辨率下通过局部调节，去适应不同的设备，不管你是电脑，pad.手机只要点开这个页面都可以很方便的浏览上面的信息。打个比方响应式布局就好比是一根皮带。对于腰粗的人扎皮带就多松几个扣子，对于腰细的人就少松几个扣子。整个网页就好比是这个皮带，响应式布局就相当于在皮带上设置几个扣子只要达到一定的标准整个网页的布局就能产生改变。
	他的优点就是方便比较省事不需要去分别写不同的代码只需要对局部做一些修改就可以很方便实现，比较合适用在一些小网站，个人博客等等。
	所以怎么样实现响应式布局如何让浏览器能自动的做出这些改变就很重要。配合媒体查询来实现这一过程，即media queries，针对不同的媒体类型定义不同的样式，从而实现响应式布局，还可以自定义不同分辨率下设置不同的样式。
	 常见的几种设备分辨率 :

1024分辨率以上：PC端
1024 ~ 768 : pad pro
768 ~ 450 : pad mini , mobile 横屏
450分辨率以下： mobile 竖屏
媒体查询的语法:
@media all and (min-width:500px){

}
针对特定范围:
@media all and (min-width:500px) and (max-width:800px){
}
针对横屏操作，只针对移动端，PC端的屏幕正常情况下都是竖屏的
@media all and (orientation:portrait){
}
(注意里面的空格是要添加的)
加在link从css文件内引用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    **<!-- <link rel="stylesheet" href="./hello.css" media="all and (min-width:600px)"> -->
    <link rel="stylesheet" href="./hello.css" media="all and (orientation:portrait)">**
</head>
<body>
    
</body>
</html>

一般情况下按照一定的顺序去来布局是比较好一点的。例如:1.先去适配PC端->过度到pad->过渡到手机端是比较方便的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    #box{ width:100px; height:100px; background:red;}

    /* 当分辨率>=500px的时候，会识别大括号里面的代码 */
    /* @media all and (min-width:500px){  
        #box{ background:blue;}
    } */
    /* 当分辨率<=500px的时候，会识别大括号里面的代码 */
    /* @media all and (max-width:500px){  
        #box{ background:blue;}
    } */

    /* @media all and (min-width:500px) and (max-width:800px){  
        #box{ background:blue;}
    } */

    /* @media print and (min-width:300px){  
        #box{ background:blue;}
        p{ text-decoration: underline;}
    } */

    /* 当分辨率<500px的时候，会识别大括号里面的代码 , not条件反过来 , 针对分辨率的 */
    /* @media not all and (min-width:500px){  
        #box{ background:blue;}
    } */

    /* @media all and (max-width:1000px){  
        #box{ background:blue;}
    }
    @media all and (max-width:600px){  
        #box{ background:green;}
    } */
    /* 当前的分辨率是800? */

    /* 只有竖屏下，才会触发大括号中的代码 */
    /* @media all and ( orientation:portrait ){
        #box{ background:blue;}
    } */

    /* 只有横屏下，才会触发大括号中的代码 */
    @media all and ( orientation:landscape ){
        #box{ background:blue;}
    }

    </style>
</head>
<body>
    <p>往往会娃娃阿瓦回家哇螯合物</p>
    <div id="box"></div>
</body>
</html>

小白航

关注

1
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
响应式网站如何实现?

什么是响应式布局?我的理解是就是一套代码让他在不同的分辨率下通过局部调节，去适应不同的设备，不管你是电脑，pad.手机只要点开这个页面都可以很方便的浏览上面的信息。他的优点就是方便比较省事不需要去分别写不同的代码只需要对局部做一些修改就可以很方便实现，比较合适用在一些小网站，个人博客等等。所以怎么样实现响应式布局如何让浏览器能自动的做出这些改变就很重要。配合媒体查询来实现这一过程，即me......
复制链接

扫一扫