首页 > 其他分享 >前端自适应写法--媒体查询

前端自适应写法--媒体查询

时间:2023-06-27 22:13:03浏览次数:37  
标签:1024px min -- 查询 width 写法 样式 CSS

自适应一般什么rem,vw,vh这些单位注意一下。还有就是一些bootStrap什么的。在这里主要写一下媒体查询的方式。

使用CSS中的媒体查询来根据不同的屏幕尺寸应用不同的样式。以下是如何使用媒体查询分别为320px-480px范围内、768px-1024px范围内和大于1024px的屏幕尺寸编写CSS样式:

/* 适用于320px-480px范围内的屏幕 */
@media screen and (min-width: 320px) and (max-width: 480px) {
/* 这里是你的CSS样式 */
}

/* 适用于768px-1024px范围内的屏幕 */
@media screen and (min-width: 768px) and (max-width: 1024px) {
/* 这里是你的CSS样式 */
}

/* 适用于大于1024px的屏幕 */
@media screen and (min-width: 1024px) {
/* 这里是你的CSS样式 */
}

 

注意,这些媒体查询可以根据你的具体需求进行调整,例如你可能想要使用min-device-widthmax-device-width代替min-widthmax-width,这取决于你希望针对设备的实际宽度还是浏览器的可视窗口宽度应用样式。

TRANSLATE with x English
Arabic Hebrew Polish
Bulgarian Hindi Portuguese
Catalan Hmong Daw Romanian
Chinese Simplified Hungarian Russian
Chinese Traditional Indonesian Slovak
Czech Italian Slovenian
Danish Japanese Spanish
Dutch Klingon Swedish
English Korean Thai
Estonian Latvian Turkish
Finnish Lithuanian Ukrainian
French Malay Urdu
German Maltese Vietnamese
Greek Norwegian Welsh
Haitian Creole Persian  
  TRANSLATE with COPY THE URL BELOW Back EMBED THE SNIPPET BELOW IN YOUR SITE Enable collaborative features and customize widget: Bing Webmaster Portal Back

标签:1024px,min,--,查询,width,写法,样式,CSS
From: https://www.cnblogs.com/ldywebhome/p/17510043.html

相关文章

  • TypeScript又出新关键字了?
    TypeScript5.2将引入一个新的关键字:using。当它离开作用域时,你可以用Symbol.dispose函数来处置任何东西。{constgetResource=()=>{return{[Symbol.dispose]:()=>{console.log('Hooray!')}}}usingresource=getResource();......
  • 力扣---53. 最大子数组和
    给你一个整数数组 nums ,请你找出一个具有最大和的连续子数组(子数组最少包含一个元素),返回其最大和。子数组 是数组中的一个连续部分。 示例1:输入:nums=[-2,1,-3,4,-1,2,1,-5,4]输出:6解释:连续子数组 [4,-1,2,1]的和最大,为 6。示例2:输入:nums=[1]输出:1示例3......
  • vue组件-启用less语法以及唯一根节点
    <template><div><divclass="test-box"><h3>这是用户自定义的Test.vue---{{username}}</h3><button@click="changeName">修改用户名</button></div>&l......
  • 6月AT杂题
    AtCoderBeginnerContest307G-ApproximateEqualization好蠢的G,但居然是*2330。显然所有数一定是\(x,x+1\)之一。因为操作不会让整个数列的和发生变化,所以我们可以求出\(x,x+1\)的具体值以及出现个数。定义\(f_{i,j}\)表示前\(i\)个数中有\(j\)个\(x+1\),因为......
  • vue透传 Attributes
    Attributes继承​在此之前,先来弥补一个小知识点,vue3支持多个根节点,vue2不支持,<!--vue2:错误的写法--><template><div></div><div></div></template><!--vue3:正确--><template><div></div><div></......
  • order() in data.table i
    In  data.table ,  the order() in  DT[i] canrearrangetheorderofthewholetablewithspecificconditions,whichworksexactlythesamewith  arrange() in  dplyr . flights[carrier=="AA",.(.N),by=.(origin,dest)][order(origin,-des......
  • 自定义代码片段
    前言使用自定义代码片段可以快速生成代码片段,提升开发效率。使用在vscode中ctrl+shift+p,新建全局代码片段。写好模板,复制进这个网站https://snippet-generator.app/将生成的模板复制进文件中......
  • lseek函数详解
    1、用lseek计算文件长度ret=lseek(fd,0,SEEK_END);返回值是文件指针距离文件开头的偏移量,也就是文件的长度2、用seek构建空洞文件1、空洞文件就是文件中有一段是空的2、普通文件中间是不能有空的,因为我们write时文件指针是依次从前向后去移动的,不可能绕过前面的直接......
  • 闲话 Day13
    又是半个月过去。然而这半个月越来越菜了。。。鉴于啥题材都没有了,所以今天闲话我们来炒炒冷饭。警告:以下内容没有任何实用价值。对复杂度不感兴趣可以直接跳过。常见算法/数据结构瞎写。之前的一车复杂度分析炸了所以被迫删了重写(然后发现没啥可写的所以开始瞎写(先说ST......
  • 介绍Hibernate使用UserType - 51CTO.COM
     介绍Hibernate使用UserType这里介绍Hibernate使用UserType,UserType就是用户自定义类型,这里的类型指的是除了Hibernate定义的那些类型之外的用户自己定义的。AD: Hibernate有很多值得学习的地方,这里我们主要介绍Hibernate使用UserType,包括介绍UserType就是用户自定义类型......