16_移动端布局

已于 2022-12-30 22:19:53 修改
阅读量204 收藏
点赞数
分类专栏： HTML5+CSS3 文章标签： css html css3
于 2022-07-26 17:58:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_58764638/article/details/126000308
版权

一、媒体查询的使用

媒体查询的使用:媒体查询只是一个概念,可以用来检测设备的特性从而设置不同的css样式而适配多个终端(用户的设备)
媒体查询的写法:@media 设备的类型 操作符号 (判断条件/设备的特性){相对应的css样式}

  • @media 表示引入的是媒体查询公式
  • 设备的类型 screen(屏幕) all(电脑、平板电脑、手机、打印设备)
  • 操作符号 and
  • 判断的条件 min-width/max-width
  • css样式

媒体查询的公式写法:@media all and (min-width:320px) and (max-width:1024px){ css }

  • 需要写在css样式表中并且建议写在样式表的最下方
  • 书写媒体查询的时候每个英文单词之间都需要空格
  • 有多个判断条件就在后面书写多个and即可
  • 由于市面上的电脑制作厂商较多,使用媒体查询会出现一些误差,可以进行微调

二、基本结构的解释

<head>
    <meta charset="UTF-8">
    <!-- 视口标签:可视范围 控制pc端和移动端的显示比例 1:1 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" user-scalable="no">
    <!-- 文档的渲染模式 以最新的浏览器edge渲染 -->
    <meta http-equiv="X-UA-Compatible" content
最低0.47元/天 解锁文章
JRealcs
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
11.13_移动端布局.xmind
11-13
11.13_移动端布局.xmind
移动应用界面设计模式 - 搜索、排序、筛选
精彩人生
05-02 771
决定放假期间先不上iOS Wow体验了；手头这篇译文不做完的话我心不甘。去年年底，我们曾经学习过一篇“具有引导性的移动应用界面设计模式”，其英文原文来自O'Reilly动物园的一本新书，"Mobile Design Pattern Gallery"，就是封面上是个大公鸡的那本儿。今次这篇则是来自于本书的第四章——搜索、排序和筛选。貌似国内引进版也由XX出版社在做着了，真心不关我事，自己走起。接
UI设计中的筛选控件指南
Mr_GuoPengFei的博客
09-17 1688
　　筛选可以说是我使用比较频繁的一种交互形式，比如我点外卖，会选择满减优惠力度大，同时我也可以选择在哪一个价格区间内的产品，这就会用到筛选，而到了B端产品上来，一个CRM系统当中，筛选的逻辑也会比移动端的复杂，伴随着：且关系、或关系、大于、小于等等这样复杂的逻辑，也为设计本身增加了很多难度。因此，今天我就来讨论讨论筛选控件。 　　1、筛选存在的意义 　　筛选存在的对于整个表单来说是非常重要的，它可以帮助用户，在表单茫茫多的数据当中进行快速的定位;可以对表单进行快速划分，缩短用户对于数据的寻找时间;能够满
基于SqlSugar的开发框架循序渐进介绍（20）-- 在基于UniApp+Vue的移动端实现多条件查询的处理
aaa123aaasqw的博客
05-27 1754
介绍了前面基于Vue3+Typescript+ElementPlus的前端界面的内容，主要还是用来引出基于UniApp+Vue的移动端实现多条件查询的处理，一般移动端的界面空间比较宝贵，所以往往查询通过组合条件的方式进行模糊查询处理，如下界面所示。在查询框中输入一些条件，会在后端对多个条件进行模糊匹配，并返回相应的结果列表进行展示，如下所示。查询界面只是接受了一个输入值，通过传递该值，在后端进行多字段的匹配查询处理。前端界面如下所示。
Vue+ElementUI+SpringBOOT实现多条件复杂查询
lovoo的博客
03-20 3403
data() {return {queryDates: [ ] , //保存日期信息key: null, //主表搜索queryField: null, //查询字段itemKey: null, //明细查询内容queryItemField: null, //明细查询字段payType: null, //支付方式 类型saleUser: null, //营业员selectField: null, //选择查询字段selectValue: null, //选择查询值。
浅谈前端移动端页面开发（布局篇）
05-27 797
前言的一些碎碎念：最近一直在写移动端的页面，不过一直是用的别人造好的轮子，很多时候并没有想那是为什么，那是怎么样要那么写，就跟着别人的文档去了。本以为自己对移动端的那一丢丢理解，结果很多东西都特么有问题，所以，今天停下了手中的一些东西，来谈下移动端的布局方案吧 内容有些长，这也是我第一次写博客，不足之处还请严厉指出 一. viewport 什么是viewport 简单来讲，viewp...
【工作技巧篇】移动端顶部搜索功能实现
weixin_33725126的博客
11-08 689
最近公司产品需要在微信内部做一个minisite，其中有一个列表页需要有顶部的搜索功能，类似京东那种，有搜索框和筛选条件。产品需要的一个操作是，当用户下滑列表时，需要顶部的搜索只保留条件筛选，搜索框等需要隐藏；当往上滑动或者滑动到列表底部（无新数据加载）时，需要将顶部的搜索功能再显示完全。 上面是现实背景，下面直接列出基本的实现代码以供...
移动页面web布局实践.zip_html5_弹性布局_移动端 web开发_移动端web
09-24
移动端页面开发，web弹性布局实践，很多好的实例可以学习。
douban.rar_移动端网站
09-23
响应式设计是移动端网站的核心，它确保网页在不同设备和屏幕尺寸上都能呈现良好的布局和用户体验。通过使用媒体查询（Media Queries）和流式布局（Fluid Grids），我们可以让网页根据设备宽度自动调整内容的展示...
携程_携程移动端_移动端轮播图_源码
10-01
(1) 自适应布局：携程移动端的轮播图设计考虑了不同屏幕尺寸，通过媒体查询实现响应式布局，确保在各种设备上都有良好的显示效果。 (2) 指示器与导航：提供了小圆点指示当前幻灯片位置，用户可点击导航按钮快速跳转...
orderser.zip_移动端web
09-19
由于移动端设备屏幕大小各异，订单系统Web端应具备良好的响应式布局，能自适应不同分辨率的屏幕，确保在手机和平板电脑上都能正常显示和使用。 7. **测试与维护**： 在开发完成后，需要进行功能测试、性能测试和...
移动端页面布局方式，简单记录一下
weixin_55935744的博客
12-01 3830
目录1、视口2、多倍图3、移动端开发选择4、移动端技术解决方案5、移动端常见布局6、流式布局7、flex弹性布局①flex与传统布局比较②flex布局原理③常见父项属性8、rem适配布局①rem基础②媒体查询③Less基础④rem适配方案 1、视口 视口就是浏览器显示页面=内容的屏幕区域 视口分为布局视口、视觉视口、理想视口 ①三种视口介绍 （1）布局视口（了解） 用于早期的PC端页面在手机上显示的问题 这个视口分辨率设置基本为980px，所以PC上的网页大多都能在手机上呈现，只不过元素看上去很小，一般
H5 移动端 测试方法
热门推荐
测试-程序媛
09-17 3万+
一.功能测试  1、关注页面请求。对于每个页面，要查看发送的请求是否正确，请求的接口是否有重复，接口请求是否正确返回等。可通过chrome中自带的开发工具查看网络请求。  关注是否有冗余接口请求，是否有不必要的重复接口刷新请求。 冗余和重复的接口请求会导致流量浪费和响应速度变慢。  2、关注application cache  （http://www.html5rocks.com/zh/t...
CSS【详解】层叠 z-index （含 z-index 的层叠规则，不同样式的层叠效果）
朝阳39的博客
07-09 595
仅对已定位的元素（）有效，默认值为0，可以为负值。
2024年公共文化与社会服务国际会议（ICPCSS 2024）
wx19980549140的博客
07-12 596
2024年公共文化与社会服务国际会议是一个集学术性、实践性和国际性于一体的盛会。我们期待与您共同探讨公共文化与社会服务的未来发展方向，为推动该领域的持续创新与发展贡献智慧和力量。随着社会的不断发展，公共文化与社会服务的重要性日益凸显。为了促进该领域的学术交流与合作，2024年公共文化与社会服务国际会议应运而生。本次会议旨在汇聚全球专家学者，共同探讨公共文化与社会服务的最新研究成果、发展趋势及面临的挑战，以推动该领域的持续创新与发展。
CSS技巧专栏：一日一例 3.纯CSS实现炫酷多彩按钮特效
uu0216的博客
07-10 1076
CSS的 box-shadow 属性可以用来给一个元素添加一个或多个阴影效果。如果你想要给一个div元素添加多种颜色的投影，你可以通过在box-shadow属性中用逗号分隔多个值对来实现。 上面代码，我们分别给按钮增加了红，黄，蓝，绿四种颜色的投影，并且让投影扩散范围增大，我们看看效果是不是我们想要的。在浏览器中刷新我们的按钮页面，把鼠标移动到按钮上，我们得到了这样的按钮效果：
html设计（两种常见的充电效果）
最新发布
2301_81704123的博客
07-12 830
title>充电效果
CSS实现table表格：隔行换色的效果
pan_junbiao的博客
07-12 105
表格是网页中十分重要的组成元素。表格用来存储数据，包含标题、表头、行和单元格。在HTML语言中，表格标记使用符号表示。定义表格光使用是不够的，还需要定义表格中的行、列、标题等内容。在CSS中，可以使用 nth-child 选择器来实现隔行换色。该选择器用于匹配父元素中的特定子元素，nth-child(odd) 可以匹配奇数行，nth-child(even) 可以匹配偶数行。使用CSS样式实现 table 表格隔行换色的效果。
旋转木马案例
喵喵的博客
07-08 712
旋转木马 如果接口需要的数据格式和原始数据提供的格式有差异 不要去改接口方法 也不要改原始数据 做一层中间件(数据处理函数/方法) <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>
element 手机适配_移动端rem.js适配屏幕
05-24
移动端的 rem.js 适配屏幕可以通过以下步骤进行： 1. 在 head 标签内加入以下代码，用于设置 viewport： ```html , initial-scale=1, maximum-scale=1, user-scalable=no"> ``` 2. 创建一个 rem.js 文件，并在该...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值