网站专题BANNER

响应式网站建设需要什么样的技术?

发表日期:2021-11-09 21:01:00 文章编辑:洛壹网络 文章来源:深圳网站建设

响应式布局是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。通俗一点来讲就是一套代码让他在不同的分辨率下通过局部调节,去适应不同的设备,不管你是电脑、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>

<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>

<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>


响应式网站建设是如何实现的?需要什么样的技术?


相关内容
今天给大家分享一波前端开发者实用干货合集

今天洛壹网络给大家来一波实用的设计和开发类的干货素材合集吧!这次的合集依然是更加偏重开发和前端的需求,有一些颇为有趣的桌面应用程序,一些非常方便的 Web 应用,以及一些实用性很强的 JavaScript 库。

前端开发 meta name="viewport" 的用法

移动端的布局不同于pc端,首先我们要知道在移动端中,css中的1px并不等于物理上的1px,因为手机屏幕的分辨率已经越来越高,高像素但是屏幕尺寸却没有发生太大变化,那就意味着一个物理像素点实际上塞入了好几个像素。

网页制作中什么是相对定位什么是绝对定位?

定位为相对定位(relative)的元素脱离文档流,但其在文档流中的位置依然存在。定位为绝对定位(absolute)的元素脱离文档流,但与relative的区别是其在文档流的位置不再存在。

深入理解 Java 枚举(enum) 7种常见的用法

在JDK1.5之前,我们定义常量都是:publicstaticfianl....。现在好了,有了枚举,可以把相关的常量分组到一个枚举类型里,而且枚举提供了比常量更多的方法。

HTTP(超文本传输协议)的六种请求方法介绍

超文本传输协议(Hyper Text Transfer Protocol,HTTP)是一个简单的请求-响应协议,它通常运行在TCP之上。它指定了客户端可能发送给服务器什么样的消息以及得到什么样的响应。

web开发人员需要掌握的编程技能有哪些?

web开发所需的编程知识随着时间的推移而不同,这取决于你想要做什么。那么web前端开发最新的编程技能和知识有哪些呢?

JavaScrip 前端/后台开发人员必须要掌握的编程技能

在每年最受欢迎的编程语言排行榜中,javascript一直处于领先地位,而2021年,它依然会是最受欢迎的编程语言。

浅谈弹性布局在网站建设过程中的奇妙之处

熟练掌握CSS弹性布局的话,无论是页面的整体设计还是局部内容的布局,都能起到事半功倍的效果,今天洛壹网络简单为大家讲解一下CSS弹性布局的奇妙之处。

我们
定制
咨询
联系
在线咨询
您的浏览器版本太低

请升级您的浏览器: Internet Explorer11 或以下浏览器: Firefox  /  Chrome  /  360极速浏览器