关于网页前端中的 media响应式布局

最新推荐文章于 2024-04-15 19:48:37 发布
最新推荐文章于 2024-04-15 19:48:37 发布
阅读量384 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41210350/article/details/81134255
版权

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <link rel="shortcut icon" href="img/mynote.ico"/>
        <link rel="stylesheet" type="text/css" href="css/reset.css" />
        <title>media响应式布局</title>
        <style type="text/css">
            #div1 {
                width: 100%;
                height: 44px;
                background: black;
            }
            
            #div2 {
                width: 1000px;
                height: 44px;
                text-align: center;
                line-height: 44px;
                color: white;
                display: flex;
                margin: 0px auto;
                justify-content: space-around;
            }
            
            #div2>span {
                width: 60px;
                height: 44px;
                font-size: 14px;
                font-weight: 400;
                display: inline-block;
                text-align: center;
            }
            
            #div2>#span3 {
                display: none;
            }
            
            #div2>span>img {
                vertical-align: middle;
            }
            /*通过@media screen可以实现响应式布局
将浏览器窗口尺寸分段
每段通过@media screen修改样式
这样就能实现网页跟随浏览器窗口尺寸改变自身布局*/
            
            @media screen and (min-width:720px) and (max-width:960px) {
                #div2 {
                    width: 100%;
                }
            }
            
            @media screen and (max-width:720px) {
                #div2 {
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                }
                #div2>span {
                    display: none;
                }
                #div2>#span1 {
                    display: inline-block;
                }
                #div2>#span3 {
                    display: inline-block;
                    margin-left: 15px;
                }
                #div2>#span2 {
                    display: inline-block;
                    margin-right: 15px;
                }
            }
        </style>
    </head>

    <body>
        <div id="div1">
            <div id="div2">
                <span id="span3"><img src="img/QQ图片20180713105401.png"/></span>
                <span id="span1"><img src="img/QQ图片20180713104805.png"/></span>
                <span>Mac</span>
                <span>iPad</span>
                <span>iPhone</span>
                <span>Watch</span>
                <span>Music</span>
                <span>技术支持</span>
                <span><img src="img/QQ图片20180713104826.png"/></span>
                <span id="span2"><img src="img/QQ图片20180713104837.png"/></span>
            </div>
        </div>
    </body>

</html>

小酉卒
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html响应式页面 （@media）
2303_76379956的博客
10-17 751
当终端宽度小于768像素时（常见于手机）
CSS Media媒体查询使用大全，完整媒体查询总结
dengla6847的博客
07-16 2830
前面的话 　　一说到响应式设计，肯定离不开媒体查询media。一般认为媒体查询是CSS3的新增内容，实际上CSS2已经存在了，CSS3新增了媒体属性和使用场景(IE8-浏览器不支持)。本文将详细介绍媒体查询的内容 媒介类型 　　在CSS2中，媒体查询只使用于<style>和<link>标签中，以media属性存在 　　media属性用于为不同的媒介类型规定...
前端提高篇（四十五）CSS进阶10Media媒体查询
2401_84092068的博客
04-15 683
问题2：我在html文件用内部引入的方法写了样式，media代码写在13.css里，用外部引入的方法加载，有时，left的效果可以被display：none掉，但是同时，nav的display: flex没有生效，于是我把media代码加在nav设置display的代码下面，问题解决。讲道理，这个border应该在30px里才对，怎么会跑出来，设置flex-grow也不行，总不能改变高度吧。设置ul为flex，主轴方向垂直，高度150px，底下5个li，但是li超出了ul。返回true，就执行。
@media响应式布局
beekim的博客
09-08 1625
1.基础语法 media语法： 文档宽度小于 300 像素则修改背景颜色(background-color): @media screen and (max-width: 300px) { body { background-color:lightblue; } } 2.案例一 实例： *{padding: 0;margin: 0;} ul{list-style: none;} ul{ display: flex; flex-wrap: wrap;
前端媒体查询@media示例详解和calc()函数的使用
weixin_45096939的博客
12-17 1809
如果出现在以逗号分隔的查询列表中，它将仅否定应用了该查询的特定查询。当布局的时候，为了做到自适应我们不能把页面的宽高写死，但有一种情况，如果我们知道布局的每个板块之前都有16px的间隔，这个间隔是固定的，这时候我们就需要使用calc函数实现页面效果。用于将多个媒体查询规则组合成单条媒体查询，当每个查询规则都为真时则该条媒体查询为真，它还用于将媒体功能与媒体类型结合在一起。not, and和 only 可用于联合构造复杂的媒体查询，还可以通过用逗号分隔多个媒体查询，将它们组合为一个规则。
使用media实现响应式布局
mfxcyh的博客
11-27 863
使用media实现响应式布局
网页前端设计服务响应式网页模板
01-20
3. 响应式框架：Bootstrap、Foundation等响应式框架提供预设的CSS类和JavaScript组件，帮助快速创建响应式布局。这些框架通常包括栅格系统，允许内容在不同设备上按列自动调整。 4. 弹性图片和媒体：响应式设计要求...
旅店前端网页（响应式布局）
02-02
【旅店前端网页（响应式布局）】 在Web开发领域，设计一个优秀的前端页面是至关重要的，特别是当我们的目标用户可能使用各种不同设备时。"旅店前端网页（响应式布局）"项目就是一个很好的示例，它展示了如何利用...
前端validate校验和响应式布局
11-27
在前端开发中，验证（validate）是确保用户输入的数据符合预期格式和规则的重要步骤，而响应式布局则是使网站能够适应不同设备屏幕尺寸的关键技术。本资源提供的"day05_validate"压缩包文件，很可能是关于这两方面...
前端响应式布局笔记-媒体查询
06-05
在前端开发中，媒体查询常用于实现响应式布局。例如，我们可以为窄屏设备定义一套布局，为宽屏设备定义另一套。以下是一个简单的例子： ```css /* 默认样式，适用于所有设备 */ .container { width: 100%; } /* 当...
手机网页会员中心响应式自适应页面源码
05-01
响应式设计是现代网页开发的重要趋势，特别是在手机网页制作中，它使得网页能够根据不同的设备屏幕尺寸自动调整布局，提供良好的用户体验。本资源为“手机网页会员中心响应式自适应页面源码”，提供了完整的前端解决...
小白也能理解@media实现响应式页面搭建
qq_45680361的博客
08-29 330
关于CSS响应式的原理 在学习@media 的时候，我们需要先知道响应式是什么，为什么我们要做响应式页面，怎么样实现响应式等，我们带着这些问题一起往下看吧 是什么响应式 响应式页面指的是同一页面在不同屏幕尺寸下实现不同的布局，从而使一个页面兼容不同的终端。 为什么我们需要做响应式页面 终端主要包括PC端和移动端，它们的分辨率以及屏幕大小都是不同的。在网站开发时，只须加入响应式设计就可以兼容这些终端，就不必单独制作移动端页面了。响应式开发主要是为了解决移动互联网浏览的问题，通过响应式设计能使网站在手机和
html5media 原理,CSS3响应式布局--Media(媒体查询)
weixin_39825259的博客
06-04 582
1.首先要了解一下什么是媒体查询媒体查询可以让我们根据设备显示器的特性(如视口宽度、屏幕比例、设备方向：横向或纵向)为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width 、 height 和 color (等)。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。2.如何在css中引入媒体查询媒体查询...
响应式布局——@media详解
东天里的冬天
03-13 938
语法： @media：&lt;media_query_list&gt; &lt;media_query_list&gt;：[&lt;media_query&gt;[',' &lt;media_query&gt;]*]? &lt;media_query&gt;：[only | not]? &lt;media_type&gt; [and &lt;expression...
html响应式布局media,JS中使用media实现响应式布局_飛雲_前端开发者
weixin_34009282的博客
06-17 226
常见写法：下面总结常见的响应式布局的分类：@media screen and (max-width:320px){#talkFooter .editArea{…… }}@media screen and (min-width:321px) and (max-width:375px){#talkFooter .editArea{…… }}@media screen and (min-width:37...
响应式布局的实现@media
xiasohuai的博客
08-19 4715
好久没写响应式页面了，这个是之前公司的一个项目。今天打开了设计文档，按照设计文档的要求大体做了一下。当然里面是存在细节问题的。如图：（基础讲解见我另一篇博客https://blog.csdn.net/xiasohuai/article/details/81147763） 这个效果如何实现呢？当然首选的就是 “媒体查询@media”了 。 媒体查询应当怎么写呢？ CSS样式分为：内联式...
Media响应式布局
weixin_43748930的博客
12-07 227
Media响应式 (1)概念–什么是多媒体查询？ 媒体查询是指：通过css查询出访问我们网页的设备的媒体类型，来决定使用何种样式。 (2)作用–多媒体解决的问题是什么？ 媒体查询的作用为：为了解决在不同媒体类型上，网页的排版，显示，样式等问题。 (3)媒体查询使用前的准备 在我们使用Media前，需要先来兼容移动设备的展示效果： 这段代码的几个参数解释： width = device-width...
css3响应式布局核心（@media常用属性）
wll_web的博客
12-26 3094
css3响应式布局核心（@media常用属性）1.媒体类型 响应式布局的核心：css3媒体查询选择器。 @media相关属性： 1.媒体类型： all:所有媒体（默认值）. screen:彩色屏幕. print:打印预览. projection:手持设备. tv:电视. braille:盲文触觉设备. embossed:盲文打印机. speech:屏幕阅读器等发声设备. tty:...
html响应式布局media,浅谈CSS响应式布局之media query（媒体查询）
weixin_33891343的博客
06-17 299
①　使用 @media 查询可以针对不同的媒体类型定义不同的样式。②　@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果需要设置设计响应式的页面。③　重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。1、media query的语法：@media 媒介类型and|not|only (媒介特征) {...}媒介类型：print：用于打印机和打印预览screen：用于电脑...
前端旅游网页制作，响应式布局
最新发布
06-29
以下是制作过程中响应式布局的关键点： 1. 响应式设计：响应式设计是为了确保网站在不同设备（如桌面电脑、平板、手机）上都能提供良好的用户体验。这通常通过使用媒体查询（Media Queries）来实现，根据视口宽度...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值