@media 实现手机和电脑屏幕的自适应效果

最新推荐文章于 2025-05-23 11:12:45 发布
最新推荐文章于 2025-05-23 11:12:45 发布
阅读量3.8k 收藏 3
点赞数 2
CC 4.0 BY-SA版权
分类专栏： 前端相关 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/u013558123/article/details/86231874
本文分享了一种在不同设备上实现图片自适应显示的CSS媒体查询技巧，通过设定不同分辨率下图片的高度，确保了从手机到电脑屏幕的良好视觉体验。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

项目中经常遇到，手机和电脑屏幕自适应的情况，用的次数多了 ，写个总结吧。直接上代码 ：

@media  screen  and (max-width: 1600px) and (min-width: 1400px) {
            
            #four_flh .flahBg ul.mile  img {
                width: 100%;
                display: block;
                margin: 0 auto;
                height: 17rem;
                /* height: 100%; */
     &nbs

了解本专栏 订阅专栏 解锁全文 超级会员免费看
CSS 利用@media screen判断识别手机/PC端浏览器
best_inh的专栏
01-07 1万+
一、写此篇的初衷： 手机用户常可以更换自己手机系统的字体，那么在浏览网页的时候，网页内容字体也都随之变了，于是我想，能不能让自己的网站的字体在手机浏览器中保持不变（使用一款自定义字体）呢；而在PC端浏览器不用处理。 二、功能实现依据： 首先，CSS @media查询中有判断横屏（orientation:landscape）、竖屏（orientation:portrait）的功能，那么分别在电脑、手机浏览器上是否有不同表现呢，如果有，就靠它了。先看如下代码： <style type="text
利用css3的@media screen实现网页布局的自适应（响应式布局）
未曾远去
07-10 5140
准备工作1：设置Meta标签 可以参考-->自适应电脑/平板/手机，自适应网页设计 首先我们在使用Media的时候需要先设置下面这段代码，来兼容移动设备的展示效果： <metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"&g...
使用@media screen实现网页布局的自适应（手机端，pc，平板自适应）
weixin_42281924的博客
08-18 5010
适用场景 在一些场景下flex布局也不一定全部适用（手机，pc，平板），因而用到了这种方式，针对不同设备进行不同的样式选择，提升用户体验。 创建html文件 使用vs code编辑器，快捷键（!+tab）创建一个html模板 其他编辑器也可把这一段代码复制过去 <!DOCTYPE html> <html lang="en"> <head> <me...
前端必备技能：玩转CSS媒体查询@media，轻松实现响应式设计
最新发布
sg_knight的专栏
05-23 1935
@media媒体查询是CSS3中的一项强大功能，能够根据设备的特性（如屏幕宽度、分辨率、横竖屏等）动态应用不同的CSS样式，从而实现响应式布局和设备适配。通过简单的语法结构，开发者可以轻松实现网页在不同设备上的优化显示，如响应式断点布局、高分辨率屏幕适配、设备方向适配、打印样式优化和暗色模式适配等。@media的核心语法包括媒体类型和媒体特性，通过组合查询和避免滥用，可以高效管理代码。掌握@media媒体查询，能够显著提升网页的跨设备兼容性和用户体验。
媒体查询 @Media （兼容移动设备手机、平板）
qq_17475727的博客
08-17 1万+
一、兼容移动设备（手机、平板） 1、使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果（手机、平板） <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> 参数解释： width = device-width：宽度等于当前设备的宽度 initial-scale： 初始的缩
CSS3(@media)判断手机横竖屏 (实用、赞）
MichaelAn的博客
02-13 621
CSS3(@media)判断手机横竖屏 (实用、赞) 原文出处：https://jingyan.baidu.com/article/455a9950aa8aaea16627788a.html 相似文章：CSS之响应式Web设计(横屏/竖屏提醒) 相信大家在使用phone/pad在浏览网页时都有这样的感受，横屏/竖屏看...
@media属性针对苹果手机写法
cc蒲公英的博客
09-08 2294
通过 CSS3 的 Media Queries 特性，可以写出兼容iPhone4/iPhone5/iphone 6/iphone6 plus的代码: @media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){     .class{}/* 兼容iphone4/4s */ }
使用 CSS3 中@media 实现网页自适应的示例代码
11-21
如今，电脑显示器的屏幕分辨率向越来越大发展，而手机等移动设备终端的分辨率却不可能大到哪里去。越来越多的网站，开始让自己的页面自适合各种分辨率，在小分辨率下显示基本的内容，在大分辨率下显示全部功能，甚至...
@media实现自适应布局
YYece的博客
01-03 2509
准备工作 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...
手机电脑模版自适应网站
08-12
在当前的互联网环境中，"手机电脑模版自适应网站"是一种重要的设计趋势，它使得网站能够在不同设备上，包括手机、平板电脑以及桌面电脑上，提供一致且优化的用户体验。这种技术的核心在于响应式网页设计（Responsive...
CSS的@media语法实现页面端手机端的自适应
热门推荐
xdnloveme的博客
07-11 1万+
在CSS3版本内有这么一个语法： @media mediatype and|not|only (media feature) {     CSS-Code; }  最近初学css，需要用到设备和电脑端各种页面自适应的情况。当然自然而然就会想到这一个属性： @media，今天花了1小时左右做了一个自适应的小demo，如下图所示： 电脑端的显示图：
css关于自媒体@media手机端自适应适配
weixin_43565197的博客
08-08 1460
html, body { height: 100%; }@media only screen and (min-width: 320px) and (max-width: 352px) { html { font-size: 45px; } } @media only screen and (min-width: 352px) and (max-width: 640px) { html { font-size: 50px; } } @media only screen and (min-width: 640
使用rem和@media screen进行移动端设备屏幕自适应布局
Tian_std_scu的博客
10-27 2267
使用rem和@media进行移动端设备屏幕自适应布局,CSS
移动端兼容及适配问题汇总
m0_49662897的博客
04-10 1148
这个问题可能是由于 iOS 中的默认缩放选项导致的。iOS 会根据网页的大小来自动调整缩放级别，以便适应设备的屏幕。这个功能可以让网页在不同的屏幕大小和分辨率下更好地显示，但有时候也会导致一些问题。在 Vue 页面中，如果你的页面布局和设计不符合 iOS 缩放机制的规则，就可能会导致 iOS 在显示你的页面时自动放大。可能的原因包括：1.没有设置 viewport meta 标签。
CSS3 @Media 媒体查询
前端产品工程师
09-22 847
/*大型屏幕pc 超大屏*/ @media screen and (min-width:1200px){ #content { color: #f00; background: #000; } } /*1200>=pc>=992 大屏，字体红色，背景黑色*/ @media screen and (min-width:992...
@media screen and (max-device-width:1600px)失效
北海
06-18 578
@mediascreenand(max-device-width:1600px){ img{max-width:90%;height:500px;} .swiper-slide>div{ width:auto; height:700px; font-size:2ch; position:relative; bot...
Vue/React项目CSS如何实现不同分辨率适配？（思路：媒体查询@media）
这世上从不缺让人上头的新鲜感，能顾及你情绪的人实属难得。
07-02 3911
Vue/React项目CSS如何实现不同分辨率适配？（思路：媒体查询@media）
html media设置自适应屏幕用法,css使用@media响应式适配各种屏幕的方法示例
weixin_33375038的博客
06-16 6471
定义和使用使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。PC端设备屏幕的宽度页面宽度大于1000px(>=1000)且小于1200px(<=1200)的时候执行下面的CSS(实际...
CSS Media媒体查询
九亿宅男的梦的博客
03-05 727
1.如当屏幕宽度最大为960px（小于960px）时，将网页背景色变为黑色： @media screen and (max-width: 960px){ body{ background:#000; } } 2.如当屏幕宽度最小为960px（大于960px）时，将网页背景色变为桔色： @media screen and (min-width:96...
实现手机电脑端图片自适应等比例缩放
例如，可以设置在屏幕宽度小于一定像素值时，图片宽度变为100%，以实现手机端的图片全屏显示；而在更大屏幕的电脑端，则可以设置图片宽度为一个固定的百分比或像素值。 3. HTML img标签的使用技巧 HTML中的标签...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

人生万事须自为，跬步江山即寥廓。

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值