页面自适应（media）

最新推荐文章于 2024-06-18 15:55:52 发布
最新推荐文章于 2024-06-18 15:55:52 发布
阅读量135 收藏
点赞数
分类专栏： 自适应
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40624809/article/details/107848832
版权

问题阐述

下面这个图片中的菜单，在不同分辨下，需要改变间距。
在这里插入图片描述

1.min-width这个值应该是屏幕可见的宽度

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
   
    .avue-top .el-menu-item {
   
      margin: 0 3px;
      padding: 0 35px;
      border-bottom: 1px solid white;

    i, span {
   
      height: 25px;
      color: white;
      position: absolute;
      left:
最低0.47元/天 解锁文章
weixin_40624809
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
@media实现自适应布局
YYece的博客
01-03 2328
准备工作 1、设置@media标签 首先我们在使用Media的时候需要先设置下面这段代码，来兼容移动设备的展示效果： <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"> widt...
@media 实现网页自适应 ...
weixin_30247781的博客
02-16 106
@media 其实就是判断屏幕多大的分辨率 然后选用什么 CSS样式 media screen and (min-width:413px) 例子就是这样的 min 相当于 >= 这个符号 max 相当于 <=这个符号 多个 判断 区间 用 and相连 media screen and (min-width:413px) and (max-wi...
@Media 自适应设备（网站兼容移动设备）
最新发布
WUXIANJINBU的博客
06-18 313
这里initial-scale、maximum-scale设置为0.1或0，表示将网页缩放至最小或者不缩放，以至于用户在移动端进入网页就能看到网页全貌，网页整体样式就不错乱了，正常情况下都是设置为1，如果设置为1的话，手机端的页面就超出屏幕，还需要用户手动缩放页面才能看到网页全貌。color-index:检查设备颜色索引表中的颜色，他的值不能是负数。device-aspect-ratio:检测设备的宽度和高度的比例。grid:检测输出的设备是网格的还是位图设备。device-width:设备屏幕的宽度。
css3 @media媒体查询
晨露
02-07 977
meta name="viewport" content="width=device-width,initial-scale=1.0,maxmum-scale=1.0,user-scalable=no"> 语法格式： @media screen and (min-width: 1200px){ body{ css code }
@media自适应宽度
Chandler1986的博客
10-08 196
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1" /> 6 <title>css...
CSS 自适应 @media 规则
weixin_43482769的博客
02-11 1386
应用场景 @media 规则在媒体查询中用于为不同的媒体类型/设备应用不同的样式。 媒体查询可用于检查许多事情，诸如： 视口的宽度和高度 设备的宽度和高度 方向（手机或平板电脑处于横屏还是竖屏模式？） 分辨率 应用示例 元素的背景颜色为白色，如果浏览器窗口的宽度为 600px 或更小时，把 元素的背景颜色更改为“浅蓝色”： body { background-color: white; } @media only screen and (max-width: 600px) { body
[HTML_CSS]@media 实现页面自适应布局
stay hungry stay foolish
05-10 4847
目录什么是自适应怎么使用@media语法补充示意图代码本节代码地址 什么是自适应 一套代码，可以根据屏幕大小，以合理的样式出现在手机，ipad，pc。 总所周知Bootstrap可以实现页面自适应布局，在不添加Bootstrap的情况下，使用@media 也可以实现页面的自适应布局。 怎么使用@media语法 根据不同宽度，选择不同的样式，screen是告知设备在打印页面时使用衬线字体 大于1000px @media screen and (min-width:100px){} 小于1000px大
使用@media媒体查询方实现页面自适应
q1054007919的博客
10-14 344
使用@media媒体查询方实现页面自适应
移动端自适应样式之@media的使用方法
11-21
通用手机端样式： @media all and (orientation : portrait) { /*竖屏*/ } @media all and (orientation : landscape) { /*横屏*/ } 指定手机端高度样式： @media screen and (max-width: 750px) @media screen and (min-width: 720px) and (max-width: 960px) {//720 <= xxx =768的设备
@media媒体查询 rem响应式布局 Web和H5页面自适应布局
weixin_57422253的博客
06-25 713
前端开发中，@media媒体查询技术主要解决H5和web页面不同屏幕尺寸自适应样式布局的问题。用屏幕宽度600px为例子，以下为屏幕尺寸小于600px时应用的CSS样式。定义输出设备中的页面最大可见区域宽度。定义输出设备中的页面最小可见区域宽度。CSS3中引入了新的样式单位rem
【屏幕自适应页面适配问题】CSS的@media，为了适应1440×900的屏幕，使用@media解决问题
DecorateCC的博客
04-12 2206
为了适应1440×900的屏幕，使用@media解决问题
【CSS】页面自适应屏幕宽度（响应式布局媒体查询-@media、弹性布局、网格布局和相对单位-vh/em/%）
m0_61049675的博客
02-01 1036
【代码】【CSS】页面自适应屏幕宽度（响应式布局媒体查询-@media、弹性布局、网格布局和相对单位-vh/em/%）
html media设置自适应屏幕用法,html5 media自适应基本操作
weixin_29743373的博客
06-16 620
html5 media自适应基本操作*{margin: 0;padding: 0;}.header,.container,.footer{margin: 10px auto;}.container{height: 500px; background: #ababab;}.header{height: 100px;background: #FCF}.footer{height: 80px;backg...
响应式（自适应屏幕）
零一
12-02 6965
一、css中@media写法 @media only screen and (min-width: 1024px)最小宽度1024 Safari版本5.1。7（7534.57.2）支持 chrome版本26.0.1410.64 m支持 opera版本12.15支持 fireFox版本21.0支持 IE10版本10.0.92000.16580 支持 @media ...
运用@media实现网页自适应中的几个关键分辨率
chaoluo001的博客
08-30 5013
1,先看下面的代码,这是从bootstrap中遍历出来的，min-width来确认分别是 768、992、1200。当然了过去也有些设备宽度是600 480的，哪些小分辨率的我们都归类为小于767的。为什么是小于767而不是768呢，那是因为在css中@media (min-width: 768px)表示最小是768也就是>=768，这里有等于，所以我们判断更小的设备用@media (max-w
CSS响应式设计——（视口/网格视图/媒体查询/图像/视频）看这一篇就够了
Vec_Kun的博客
02-02 1135
响应式 web 设计会让我们的网页在所有设备上运行良好。响应式 web 设计仅使用 HTML 和 CSS。响应式 web 设计并不是程序或 JavaScript。视口（viewport）是用户在网页上的可见区域。视口随设备而异，在移动电话上会比在计算机屏幕上更小。在平板电脑和手机之前，网页仅设计为用于计算机屏幕，并且网页拥有静态设计和固定大小是很常见的。然后，当我们开始使用平板电脑和手机上网时，固定大小的网页太大了，无法适应视口。
CSS3中的媒体查询知识点整理
m0_57533638的博客
05-22 1034
媒体查询 文章目录媒体查询概念逻辑运算符：媒体类型 (mediaType)：媒体功能 (mediafeature)：举例单个使用用min-width时，小的在上面，大的在下面用max-width时，大的在上面，小的在下面同时使用 min-width 和 max-width 概念 媒体查询就是针对不同的终端 (PC端、iPad端和移动端)，在使相同的 HTML结构的前提下，利用 CSS 的媒体查询来为不同的终端调用不同的CSS样式，从而在不同的终端中，都能呈现出不同的UI界面效果。 并且在使用媒体查询时，
关于c#mvc框架下屏幕自适应，@media报错在上下文中不存在问题
weixin_38808271的博客
11-06 247
此时页面会报错@media在上下文中不存在，自适应第二步，添加不同屏幕尺寸下css。
媒体查询——>@media screen and (min-width: 768px)
热门推荐
qq_39579242的博客
08-28 1万+
响应式网页设计的时候，往往都需要运用到CSS3的媒体查询技术，实现在大PC端，普通PC端、平板端、移动端呈现不同的样式 参考数据标准： 当屏幕宽度&gt;1200px（超大PC显示器-lg）：    容器宽1170px 当屏幕宽度&gt;992px（普通PC显示器-md）:    容器宽970px 当屏幕宽度&gt;768px（平板显示器-sm）:        容器宽750px 当屏幕...
iframe内嵌页面自适应
05-28
为了解决这个问题，可以使用一些技巧来实现iframe内嵌页面自适应： 1. 设置iframe的高度为auto，让它自适应内容的高度： ```html ; height: auto;"> ``` 2. 使用JavaScript动态调整iframe的高度，让它始终与内容...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值