26.做移动端的项目时，用一条媒体查询就搞定

最新推荐文章于 2024-04-29 07:13:37 发布

原创最新推荐文章于 2024-04-29 07:13:37 发布 · 443 阅读

0 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

35 篇文章

订阅专栏

本文介绍如何使用媒体查询设定网页的最大宽度为640px，并探讨了视口元标签的正确设置方法，包括width、height等属性的使用。

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

按照设计图给的尺寸进行媒体查询假如：640px；媒体查询就写640 然后高不给具体数值，里面的东西正常写就行，可以用px或者百分比

这个时候媒体查询也可以不写，一样好使但是要求最大的宽要给定640px；

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

咖喱鸡块

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

女朋友要我教她CSS，我就写了这一篇长文，感动哭了？

超逸の学习技术博客

05-30

9951

女朋友她又要我教她CSS，这4w字长文够了吗？她会被感动到吗？

uniapp [全端兼容] - 实现播放m3u8视频流+hls拉流推流完整方案，播放m3u8格式文件视频播放教程（流媒体播放、直播视频流、实时摄像头监控视频流对接、后端服务器切片分片传输视频流边下边播

最新发布

🏆 前端领域优质创作者

07-03

3860

uniapp播放m3u8格式视频，h5移动端网页，微信小程序，支付宝小程序，Android安卓，苹果ios，app，nvue，实现hls流媒体监控摄像头实时播放，播放m3u8视频流格式，实时直播画面视频流播放，摄像头监控画面推流，hls.js，uniapp H5播放m3u8视频流格式，实现hls流媒体监控摄像头实时播放，Uniapp中怎么播放m3u8格式的视频，uniapp小程序m3u8格式视频，通过HLS协议播放m3u8格式视频，黑屏不显示，视频非常卡加载缓慢，uniAPP播放器插件,支持m3u8(hls

参与评论您还未登录，请先登录后发表或查看评论

css3媒体查询详细介绍和移动端项目准备工作前端小白必备哦！！！

chenyuXYT的博客

04-15

338

文章目录媒体查询语法设备类型(默认值为all)关键字常见适配范围移动端项目准备工作meta标签的设置重点设置分辨率，PPi,DPI,DPR,物理像素，逻辑像素区别常见单位 媒体查询 媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width 、 he...

媒体查询下移动端配方案

weixin_30537391的博客

08-10

140

//设置常用的body html{ font-size: 50px; } @no:15; @media screen and (min-width:320px) { html{ font-size: 320px/@no; } } @media screen and (min-width:360px){ html{ ...

web 移动端媒体查询 适用各种情况

github_39427902的博客

12-24

1465

@media screen and (orientation: portrait) { /*竖屏 css*/ } @media screen and (orientation: landscape) { /*横屏 css*/ } @media screen and (min-width:1366px){ /*pc端 css*/ } /*iphone 5/5s/5se...

媒体查询 android,媒体查询

weixin_35879493的博客

06-01

184

Media Queries自适应阶段自从有了不同屏幕的尺寸，我们就开始尝试自适应了居中虽然不能让所有屏幕都自适应，但是可以利用居中让元素看起来在同一位置.center{width: 990px;margin: 0 auto;height: 200px;line-height: 200px;}百分比同样可以利用百分比让DOM结构适应屏幕.container{border-top: solid 1px...

Vue（三十）rem和媒体查询

憨憨的博客

04-21

1695

一、rem 1、rem 是一个相对单位，，rem的基准是相对于html元素的字体大小 2、rem的优点：可以通过修改html里面的文字大小来改变页面中元素的大小，可以整体控制 3、类似于em,em是父元素字体的大小 eg: em的使用：父元素设置font-size= 14px,非根元素设置width:2rem,则换成px表示就是28px rem的使用：根元素（html）设置font-size= 14px,非根元素设置width:2rem,则换成px表示就是28px 二、媒体查询

移动端开发之Web App开发

吉帅振博客

06-26

8307

写在前面：本人刚刚接触移动端开发，希望自己的见解能够帮助到他人，不足之处还望提醒。1 移动端开发分类1.1 Native App 原生App开发优点：（1）用户体验好（2）性能稳定（3）操作速度快（4）能够访问本地资源（通讯录，相册）（5）能够设计出色的动效，转场（6）拥有系统级别的贴心通知或提醒（7）用户留存率高缺点：（1）开发成本高（2）维护成本高（3）更新缓慢，根据不同平台，提交–审核–上线...

【产品经理修炼之道】- 新媒体自媒体人必备工具

xiaoli8748的专栏

04-29

1593

千瓜数据，是西瓜集下的其中一个产品，他的主要功能是用于小红书数据分析，它包括行业流量大盘、品牌投放大盘、达人查找、直播监控、热搜词查询分析、热门话题排行、笔记收录查询、品牌搜索分析、商品搜索分析、数据导出、MCN排行榜，直播排行榜等功能，能够帮助我们直接了解自己小红书号与品牌号运营现状，迅速获取小红书的运营数据。每日人工精选圈内干货文章，涵盖用户增长、私域流量、抖音运营、视频号运营、APP推广、ASO、新媒体运营、用户运营、数据分析、活动运营、职场进阶，无论思维升级还是实战技能，这里一站打包。

MQTT vs. XMPP，哪一个才是IoT通讯协议的正解

XDongger的博客

09-08

751

我对MQTT还是非常熟悉的，我用它做过IoT应用，开发过IoT产品。我对XMPP应该说算是精通了，我写过XMPP基础开发库、XMPP服务器、实现过XMPP的各种标准，并基于XMPP做了了IoT开发平台。我尝试客观的来评价这两种协议，如果抛开我更擅长XMPP，以及Lithosphere基于XMPP技术开发的主观立场，我如何评价这两种协议呢？

CSS3中媒体查询结合rem布局适配手机屏幕

11-21

css3语法: （750px设计图的1rem = 100px） @media only screen and (min-width: 320px) and (max-width: 479px){ html { font-size: 42.67px !important; } } @media only screen and (min-width: 480px) and (max-width: 639px){ html { font-size: 64px !important; } } @media only screen and

手机端媒体查询

luoteen的博客

09-22

887

@media (min-width: 320px) and (max-width: 359px){ } @media (min-width: 360px) and (max-width: 374px){ } @media (min-width: 375px) and (max-width: 385px){ } @media (min-width: 386px) and (max-width: 392px) { } @media (min-width: 393px) and (max-widt

vue项目实战（个人博客）五------使用媒体查询实现响应式设计

热门推荐

guoang

09-01

1万+

使用媒体查询 @media only screen and (min-width: 768px) 加载css样式的最小屏幕宽度 @media only screen and (max-width: 768px)加载css样式的最大屏幕宽度 /** 平板 **/ @media only screen and (min-width: 768px) and (max-width: 1024px) { ...

媒体查询---移动设备

xiaolihui321的博客

07-11

516

一、移动端开发特点 1、移动设备上的浏览器版本基本上为主流浏览器，所以，不需要像PC端开发一样将浏览器的兼容性放在首位。 2、每一款移动设备的内核不同，分别有webkit、IOS 3、分辨率不同。分辨率越高，图片显示就越小。二、什么是适配个人的理解是，通过一定的方式来进行页面的处理，达到在各个分辨率和屏幕大小的移动设备均可正常显示的效果三、如何解决解决适配问题，除了利用js、window....

媒体查询 @Media

qq_44820039的博客

04-30

3813

随着智能手机的普及，响应式布局的使用也是日益增长现在许多网站都在应用这项技术，也方便了我们的生活毕竟不能去哪都带着电脑吧所以媒体查询就出来了只需要一套代码就能在不同的大小的设备上面正确显示。 媒体查询 媒体查询可以让我们根据设备显示的特征（视口宽度、屏幕比列、设备方向）来设定CSS样式，媒体查询有媒体类型和一个或多个检测媒体特征的条件表达式组成。 meta标签在网页头部添加这一行代码 &lt...

媒体查询和移动端准备工作

qq_46579440的博客

04-15

122

媒体查询：由设备类型、监测设备特性表达式构成。语法： @media 设备类型[all\screen] and (条件表达式){ ...

媒体查询-PC端和手机端适配

七七的博客

09-13

1406

@media媒体查询，pc端，移动端适配问题

移动端开发之rem适配布局、媒体查询和Less基础

weixin_63156135的博客

10-20

892

移动端开发之rem适配布局、媒体查询和Less基础

vue手机适配媒体查询用法@media

m0_49714202的博客

05-17

2666

注意: 每个像素阶段都已经上下连接成了，1200px~767px，最高到最低，每个阶段样式字体大小，布局等都可以写在里面,可以按f12，查看各个手机端样式变化~ 在index.html页面引入css文件 <link rel="stylesheet" href="./css/index.css"> 在创建一个index.css文件，样式放入里面，自己也可以单独每个阶段分开分别创建个4css文件，全部引入index.css文件里面 @media (min-width:1200px.