首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

单独的css参考为移动,建议的最大设备宽度?

单独的CSS参考为移动,建议的最大设备宽度是 768 像素。

移动设备的屏幕尺寸和分辨率各不相同,为了适应不同的移动设备,响应式设计成为一种常用的解决方案。在响应式设计中,通过使用媒体查询(Media Queries)来根据设备的屏幕宽度应用不同的CSS样式。

对于移动设备而言,一般认为最大设备宽度为 768 像素是一个较为合适的参考值。这是因为大部分手机和平板设备的屏幕宽度都在这个范围内。当设备宽度小于等于 768 像素时,可以应用针对移动设备的CSS样式,以提供更好的用户体验。

在实际开发中,可以使用以下CSS媒体查询来针对不同设备宽度应用不同的样式:

代码语言:css
复制
/* 移动设备样式 */
@media (max-width: 768px) {
  /* 在此处添加针对移动设备的CSS样式 */
}

推荐的腾讯云相关产品和产品介绍链接地址:

  • 腾讯云移动应用开发平台:提供移动应用开发所需的云服务,包括移动后端云、移动推送、移动分析等。了解更多:腾讯云移动应用开发平台

请注意,以上答案仅供参考,具体的最大设备宽度还需根据实际项目需求和设计准则进行调整。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

CSS实现移动端常见布局——高度和宽度挂钩秘密

CSS实现移动端常见布局——高度和宽度挂钩秘密 不踩坑不回头.之前我在一个项目中大量使用css3calc计算属性.写代码时候真心不要太爽啊…但是在项目上线之后,才让我崩溃了,原因很简单,在低于安卓...通过我研究,最终还是很快用CSS解决了....需要效果,如下图: 需求分析 看图,其实很简单.如果宽度是固定,那么这个布局就不要太简单了. 问题是,设备宽度是不固定哦,那么问题就是,在不知道具体宽度时候,如何来设定它对应高度呢?...也就是说,如何在CSS中,找到一个高度和宽度挂钩属性.只要存在这个参数,那么,问题就能解决. 那么有没有这个参数呢?...在我们遇到一些问题时候,尤其是布局这种问题,我们要考虑是,能不能用CSS解决,而不时一位去考虑JS.毕竟,JS是用来交互,而CSS是用来布局.

1.3K10
  • CSS宽度百分比时候,如何让高等于宽

    说明: 1、将盒子宽度设置自己需要百分比,这里以 16% 例; 2、将盖盒子高度设置 100%; 3、通过伪类控制高度  ul li::before{ content: ""; padding-top...);        -o-transform: translate(-50%, -50%);        transform: translate(-50%, -50%);} 5、这样就实现了,无论设备分辨率怎么变化...,这个盒子始终都是正方形宽度啦!!...-- 当宽度百分比时候,如何让盒子始终保持正方形状态 -->                           1                  ...-- 当宽度百分比时候,如何让盒子始终保持正方形状态 -->                           1

    2.9K31

    移动端网页布局】流式布局案例 ① ( 视口标签设置 | CSS 样式文件设置 | 布局宽度设置 | 设置最大宽度 | 设置最小宽度 )

    一、视口标签设置 参考移动端网页布局】移动端网页布局基础概念 ③ ( meta 视口标签简介 | 利用 meta 视口标签 设置 网页宽度 / 是否允许用户缩放 / 初始缩放比例 / 最小缩放比例...css 文件夹 , 在其中存放如下两个 css 样式文件 : normalize.css 初始化样式文件 : 参考移动端网页布局】移动端网页布局基础概念 ⑨ ( webkit 内核 | 移动端网页...在移动端网页布局中 , 网页布局宽度 = 移动设备宽度 , 因此在进行布局时 , 可以为网页布局主体 标签设置 100% 宽度 ; 2、设置布局最大宽度 将 京东 手机端页面 , 拉倒最大便不再放大..., 如下图所示 , 这是因为该页面设置了最大像素 ; 一般移动端页面最大像素设置 980 像素 ; 3、设置布局最小宽度 将京东 手机端 页面宽度压缩到最小 , 如下状态时 , 就不能再进行压缩了...进入调试模式 , 可以看到最大宽度是 1080 像素 , 最小宽度是 320 像素 ; 5、布局宽度设置 body { /* 网页布局宽度 = 设备宽度 */ width: 100%

    2.4K10

    移动端WEB开发之响应式布局

    设备划分情况: 小于768超小屏幕(手机) 768~992之间小屏设备(平板) 992~1200中等屏幕(桌面显示器) 大于1200宽屏设备(大桌面显示器) 1.2...适合单独移动端开发 2.6 bootstrap栅格系统 栅格系统英文"grid systems" ,也有人翻译为“网格系统”,它是指将页面布局划分为等宽列,然后通过列数定义来模块化页面布局。...超小屏幕(手机)=768px 中等屏幕(桌面显示器)>=992px 宽屏设备(大桌面显示器)>=1200px .container 最大宽度 自动(100%) 750px...书写内容 container宽度修改 因为本效果图采取 1280宽度, 而Bootstrap 里面 container宽度 最大为 1170px,因此我们需要手动改下container宽度...;     }   } ​ 移动端总结 移动端技术选型 流式布局 (百分比布局) flex弹性布局(推荐) rem适配布局 (推荐) 响应式布局 建议:我们选取一种主要技术选型

    4K20

    移动开发-流式布局

    最大宽度 – max-height 最大高度 min-width 最小宽度 – min-height 最小高度 图片 CSS初始化 normalize.css: 移动CSS初始化推荐使用normalize.css...,可通过缩放去操作视觉视口 理想视口 ideal viewport: 理想视口,对设备来讲,是最理想视口尺寸,需要手动添写meta视口标签通知浏览器操作 meta视口标签目的:布局视口宽度应该与理想视口宽度一致...,就是设备有多宽,布局视口就多宽 二倍图: 一个px能显示物理像素点个数,称为物理像素比或屏幕像素比,1CSS像素=1物理像素 多倍图: 在标准viewport设置中,使用倍图来提高图片质量,解决在高清设备模糊问题...属性 多倍图切图 cutterman: 图片 移动端主流方案: 单独制作移动端页面 (主流),通过判断设备,如果是移动设备打开,则跳到移动端页面 响应式兼容移动端 (其次),通过判断屏幕宽度来改变样式...设置transparent 完成透明*/ -webkit-tap-highlight-color: transparent; /*在移动端浏览器默认外观在iOS上加上这个属性才能给按钮和输入框自定义样式

    1K30

    移动webapp前端开发小结

    一、页面head头部meta声明 针对移动设备特性,在head标签内需要添加一些特殊声明。.../*窗口宽度小于等于640px时,应用这些样式*/ } @media (min-width:721px) { /*窗口宽度大于等于721px时,应用这些样式*/ } 方法二、满足查询条件设备匹配不同样式表..."> 三、响应式设计,自适应多分辨率移动设备 如果我们针对不同分辨率移动设备匹配同一套CSS样式(比如:字体、图片大小等),最终显示结果很可能某些分辨率上效果不错、而其他分辨率显示效果则会千差万别...这样box1还是正常显示,box2则水平排列,且宽度父元素值-box1宽度*/ } 3、背景渐变 background-image: -webkit-linear-gradient(top,#f7f7f7...如果设计稿上,同一位置(比如Tab切换)上图标大小不同,在切图时建议通过留白方式将图标手动处理相同宽高,这样就可以让图标对齐,避免在写样式时通过代码样式来微调图标。

    1.3K20

    从零开始学 Web 之 移动Web(六)响应式布局

    网页布局 常见网页布局方式分为以下四种: 1、固定宽度布局:网页设置一个固定宽度,通常以px做为长度单位,常见于PC端网页。 2、流式布局:网页设置一个相对宽度,通常以百分比做为长度单位。...应用在移动设备上就会带来严重性能问题。...min-device-height 定义输出设备屏幕最小可见高度。 max-height 定义输出设备页面最大可见区域高度。 max-width 定义输出设备页面最大可见区域宽度。...在移动端,由于通过模拟器改变移动设备宽度,所以 min-width 与 min-device-height 效果一样; 在 PC 端,如果改变浏览器宽度,而我们电脑宽度并没有改变,所以设备宽度一定...向下覆盖:宽度更大样式会将前面宽度更小样式覆盖 书写建议: 如果是判断最小值 (min-width),那么范围就应该从小到大写 如果是判断最大值 (max-width),那么范围就应该从大到小写

    1.5K20

    响应式布局实现

    响应式布局实现 响应式布局指的是同一页面在不同屏幕尺寸或者在不同设备下有不同布局,能够在大屏设备以及小屏设备获得更好浏览体验,简单来说就是页面适应终端而无需每个终端制作单独页面。...max-device-height: 定义输出设备屏幕可见最大高度。 max-device-width: 定义输出设备屏幕最大可见宽度。...max-resolution: 定义设备最大分辨率。 max-width: 定义输出设备页面最大可见区域宽度。...width: 定义输出设备页面可见区域宽度。 单位 百分比单位 当度量单位设置百分比时,即可使浏览器组件宽高随着浏览器大小相应变化。...PC端还是平板或者是手机,或者是通过检测窗口分辨率而请求服务器,从而服务端重定向或者返回不同页面,需要开发多个页面来适应不同设备,通常自适应布局与响应式布局并不是单独使用,可以通过开发一套PC端页面与一套移动端页面来实现自适应布局

    1.9K30

    前端成神之路-移动web开发_流式布局

    :布局视口宽度应该与理想视口宽度一致,简单理解就是设备有多宽,我们布局视口就多宽 总结:我们开发最终会用理想视口,而理想视口就是将布局视口宽度修改为视觉视口 2.4meta标签 ?...最标准viewport设置 视口宽度设备保持一致 视口默认缩放比例1.0 不允许用户自行缩放 最大允许缩放比例1.0 最小允许缩放比例1.0 3.0二倍图 ####3.1物理像素&物理像素比...contain把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域 4.0 移动开发选择和技术解决方案 ####4.1移动端主流方案 1.单独制作移动端页面(主流) 通常情况下,网址域名前面加 m...通过判断设备,如果是移动设备打开,则跳到移动端页面。 也就是说,PC端和移动两套网站,pc端是pc断样式,移动端在写一套,专门针对移动端适配一套网站 京东pc端: ? 京东移动端: ?...移动端大量使用 CSS3盒子模型box-sizin 传统模式宽度计算:盒子宽度 = CSS中设置width + border + padding CSS3盒子模型: 盒子宽度= CSS中设置宽度

    1.6K21

    移动web开发_流式布局

    :布局视口宽度应该与理想视口宽度一致,简单理解就是设备有多宽,我们布局视口就多宽 总结:我们开发最终会用理想视口,而理想视口就是将布局视口宽度修改为视觉视口 2.4meta标签 最标准viewport...设置 视口宽度设备保持一致 视口默认缩放比例1.0 不允许用户自行缩放 最大允许缩放比例1.0 最小允许缩放比例1.0 3.0二倍图 ####3.1物理像素&物理像素比 物理像素点指的是屏幕显示最小颗粒...contain把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域 4.0 移动开发选择和技术解决方案 ####4.1移动端主流方案 1.单独制作移动端页面(主流) 通常情况下,网址域名前面加 m...也就是说,PC端和移动两套网站,pc端是pc断样式,移动端在写一套,专门针对移动端适配一套网站 京东pc端: 京东移动端: 2.响应式页面兼容移动端(其次) 响应式网站:即pc和移动端共用一套网站...移动端大量使用 CSS3盒子模型box-sizin 传统模式宽度计算:盒子宽度 = CSS中设置width + border + padding CSS3盒子模型: 盒子宽度= CSS中设置宽度

    1.3K10

    响应式网页bootstrap

    响应式网页设计 根据设备尺寸,自动调整布局,有bootstrap和foundation等 bootstrap没有自定义标签,主要通过css扩展class foundation不兼容旧版本ie 网格系统...相当于C#UI里面的容器系统,bootstrap对css进行扩展,使用了类似less文件中变量定义,sacc不仅增加了变量还多了继承、混合、嵌套等功能 布局中必须row包含col,不能单独col...bootstrap网格系统 col- 针对所有设备 col-sm- 平板 - 屏幕宽度等于或大于 576px col-md- 桌面显示器 - 屏幕宽度等于或大于 768px) col-lg- 大桌面显示器...css属性上封装了三种布局方式,使用控件嵌套方式布局,设置宽度最大值和最小值 .container, which sets a max-width at each responsive breakpoint...speech用于屏幕阅读器 移动端viewport自适应

    6.8K30

    浅谈移动端中视口(viewport)

    CSS 标准文档中,视口也被称为初始包含块,它是所有 CSS 百分比宽度推算根源,给 CSS 布局限制了一个最大宽度。...物理像素(设备像素,device pixels) 指的是设备屏幕物理像素,任何设备物理像素数量都是固定CSS 像素(CSS pixels) 是 CSS 和 JS 中使用一个抽象概念。...1.2 三种视口 移动端浏览器通常宽度是 240px~640px,而大多数 PC 端设计网站宽度至少 800px,如果仍以浏览器窗口作为视口的话,网站内容在手机上看起来会非常窄。...,对 PC 端浏览器是无效 当缩放比例 100% 时,dip 宽度 = CSS 像素宽度 = 理想视口宽度 = 布局视口宽度 单独设置 initial-scale 或 width 都会有兼容性问题...其与理想视口宽度比值1.5(2880/1920),这个比值叫做设备像素比: 逻辑像素宽度 * 设备像素比 = 物理像素宽度 设备像素比可以通过 window.devicePixelRatio 来获取

    2.1K20

    两个 viewports 故事-第二部分

    我们将在本页讨论移动浏览器。如果你是刚刚接触移动端,我建议你首先阅读关于桌面浏览器第一部分。这会让你在熟悉环境中循序渐进。...移动浏览器问题 手机浏览器与桌面浏览器最大不同就是屏幕尺寸。...手机屏幕远小于桌面屏幕,最大宽度也就 400px 甚至更小(有些手机据称有更大宽度,那是骗人,或者至少给我们是无用信息)。...如果移动浏览器和桌面浏览器工作原理相同,侧边栏至多显示 40px 宽,确实太窄了。你自适应布局看上去被压扁了。 解决这个问题方法之一就是移动浏览器设计特殊网站。...除了你是否应该这样做问题之外,实际问题是只有很少网络公司会为移动单独设计网站。 手机浏览器供应商希望客户提供最好用户体验,这意味着“尽可能如桌面显示一样”。

    1.8K70

    移动端viewport属性说明笔记

    # CSS 像素(CSS pixels) 是 CSS 和 JS 中使用一个抽象概念。它和物理像素之间比例取决于屏幕特性(是否高密度)以及用户进行缩放,由浏览器自行换算。...根据设备不同,布局视口默认宽度有可能是768px、980px或1024px等,这个宽度并不适合在手机屏幕中展示。移动端浏览器之所以采用这样默认设置,是为了解决早期PC端页面在手机上显示问题。...# 视觉视口(visual viewport) 视觉视口是指用户正在看到网站区域,这个区域宽度等同于移动设备浏览器窗口宽度,用户可以通过缩放操作视觉视口,同时不会影响布局视口。 ?...dip 和设备物理像素无关,一个 dip 在任意像素密度设备屏幕上都占据相同空间。如果用户没有进行缩放,那么一个 CSS 像素就等于一个 dip。 ?...端浏览器无效 缩放比例 100% 时,dip 宽度 = CSS 像素宽度 = 理想视口宽度 = 布局视口宽度 单独设置 initial-scale 或 width 都会有兼容性问题,所以设置布局视口理想视口最佳方法是同时设置这两个属性

    1.5K20

    动态 | 谷歌大脑用强化学习移动设备量身定做最好最快CNN模型

    然而,移动设备设计 CNN 模型是一个有挑战性问题,因为移动模型需要又小又快,同时还要保持足够准确率。...受到 AutoML 神经网络架构搜索研究启发,谷歌大脑团队开始考虑能否通过 AutoML 力量让移动设备 CNN 模型设计也更进一步。...在谷歌 AI 博客新博文中,他们介绍了用 AutoML 思路移动设备找到更好网络架构研究成果。雷锋网 AI 科技评论把博文编译如下。...以往网络架构搜索方法中,模型运行速度通常是借助另一种指标进行参考(比如考虑设备每秒运算数目),而谷歌大脑此次方法是通过在给定设备上运行模型,直接测量模型运行时间长短;在这项研究中他们使用就是自家...移动设备自动搜索神经网络架构总体流程图 对于网络架构搜索过程,为了在搜索灵活性和搜索空间大小之间取得合适平衡,谷歌大脑研究人员们提出了一种新因子分解层级化搜索空间,它设计是把一整个卷积网络分解一系列按顺序连接模块

    31410

    响应式设计

    首先,它告诉浏览器当解析 CSS 时将设备宽度作为假定宽度,而不是一个全屏桌面浏览器宽度。其次当页面加载时,它使用 initial-scale 将缩放比设置 100%。...# 添加响应式列 许多响应式设计遵循这种方法:当设计要求元素并排摆放时,只在大屏上将它们摆放在一行。在小屏下,允许每个元素单独一行,填满屏幕宽度。...更多响应式模式可以参考 this is responsive (opens new window)。 # 断点选择 不要总想着设备。市面上有成百上千中设备和屏幕分辨率,无法逐一测试。...如果可以的话,建议移动设备上用别的方式组织数据。比如将每一行数据单独用一块区域展示,让每块区域顺序叠放,或者用更适合小屏可视化图形或者图表展示。但是,有时候就是需要用表格。...不仅要让图片适应屏幕,还要考虑移动端用户带宽限制。图片通常是网页上最大资源。 首先要保证图片充分压缩。还要避免不必要高分辨率图片,而是否必要则取决于视口大小。

    2K10

    PC端、移动页面适配及兼容处理

    前端模块加载器主要负责按需加载,以提高页面加载速度,css预处理器 变量、运算、嵌套等特性可大大提高手动计算响应式效率,妈妈再也不用担心我把比例算错了。当然后两者可参考需求及成本决定是否采用。...(一)几个概念 1.css像素 html中度量单位 用px来计算,在pc中往往 1 css px = 1 物理像素 css像素时抽象和相对了,在不同设备中1px对应不同设备像素;iphone3分辨率是...5.layout viewport 移动设备默认viewport,css布局是以layout viewport 来做为参考系计算 document.documenElement.clientWidth...,ideal viewport 宽度等于设备屏幕宽度,使得无论在什么分辨率下,那些针对ideal viewport设计网站都可以完美的呈现给用户。...//UI-width: 布局宽度 //device-width:屏幕分辨率宽度 iphone4640 //target-densitydpi=device-dpi 标示使用设备本身物理屏幕像素,不会发生默认缩放

    2.7K20

    【适配】425- 彻底搞懂移动Web开发中viewport与跨屏适配

    注:移动设备显著特点是屏幕小,考虑到国际社会通行水平阅读习惯,下文我们只讨论宽度。 3.1 窄屏设备问题 移动互联网早期,屏幕设备物理像素点宽度多数在 320、480、640 等。...3.2 放大viewport 为了优化“最初 PC 设计网页”在移动设备浏览体验,移动浏览器厂商们想了一个方案,那就是增大页面载入时初始视口宽度,比如 Android 和 iOS 都比较常见...不过,该方案依然会有很多问题: ●对缩小版页面内细节内容浏览,依然要依靠放大和滚动,体验不好; ●如果 PC 设计 网页 CSS 宽度描述大于 980px,那么在移动端展示时,初始页面依然会有滚动条...; ●需要充分利用屏幕物理像素点做 1 像素极细边线页面,我们可以设置 viewport 缩放倍数 1/dpr,以使得 css 1px 刚好对应设备物理像素中 1 个点; ●需要根据屏幕宽度弹性伸缩页面...●设置 viewport 宽度 device-width 或其他固定值,以得到 px 单位文字、图标或边线等期望渲染效果 ●css 单位使用 rem,js 根据 viewport 宽度以及 css

    3K30

    彻底搞懂移动Web开发中viewport与跨屏适配

    注:移动设备显著特点是屏幕小,考虑到国际社会通行水平阅读习惯,下文我们只讨论宽度。 3.1 窄屏设备问题 移动互联网早期,屏幕设备物理像素点宽度多数在 320、480、640 等。...3.2 放大viewport 为了优化“最初 PC 设计网页”在移动设备浏览体验,移动浏览器厂商们想了一个方案,那就是增大页面载入时初始视口宽度,比如 Android 和 iOS 都比较常见...不过,该方案依然会有很多问题: ●对缩小版页面内细节内容浏览,依然要依靠放大和滚动,体验不好; ●如果 PC 设计 网页 CSS 宽度描述大于 980px,那么在移动端展示时,初始页面依然会有滚动条...; ●需要充分利用屏幕物理像素点做 1 像素极细边线页面,我们可以设置 viewport 缩放倍数 1/dpr,以使得 css 1px 刚好对应设备物理像素中 1 个点; ●需要根据屏幕宽度弹性伸缩页面...●设置 viewport 宽度 device-width 或其他固定值,以得到 px 单位文字、图标或边线等期望渲染效果 ●css 单位使用 rem,js 根据 viewport 宽度以及 css

    3.3K20
    领券