首页 文章
  • 0 votes
     answers
     views

    敏感的css sprite视网膜

    我在最后几天读了很多关于这个话题的内容,但我找不到解决方案 . 我有两个精灵套装,一个是低质量的普通显示器,另一个是高质量的视网膜显示器 . 我的问题是,我的网站必须响应,图形应根据浏览器窗口调整大小 . 但是使用 background-size 属性,我似乎无法告诉浏览器调整精灵的大小 . 这是我到目前为止所得到的: #logo-img { max-width: 100%; text-i...
  • 12 votes
     answers
     views

    当存在未应用的媒体查询时,IE11会在页面加载时触发css转换

    我的情况只发生在IE11上 . Chrome,Firefox,Safari(平板电脑和手机)都按预期工作 . 我已经创建了一个面板(DIV)的过渡,它从侧面滑入/滑出 . 在页面加载时,它不应该"animate"但是会卡入适当的位置 . 但是在IE11上,当页面加载时,转换是"played" ONLY,如果有一个媒体查询涉及该元素与选择器的最高CSS特异性...
  • 0 votes
     answers
     views

    基金会Zurb媒体查询

    我正在尝试将这两个列的位置切换为大8和大4,我希望在小屏幕上查看页面时文本位于图像下方 . 列结构是这样的 div id="roofing"> <div class="large-8 columns"> <h3>Roofing</h3> ...
  • 350 votes
     answers
     views

    Twitter Bootstrap 3:如何使用媒体查询?

    我正在使用Bootstrap 3来构建响应式布局,我想根据屏幕大小调整一些字体大小 . 如何使用媒体查询来制作这种逻辑?
  • 128 votes
     answers
     views

    Bootstrap 3断点和媒体查询

    在http://getbootstrap.com/css/上它说: 我们使用以下媒体查询在网格系统中创建关键断点 . 超小型设备(手机,最高480px):无媒体查询,因为这是Bootstrap小型设备(平板电脑,768px及更高版本)的默认设置:@media(最小宽度:@ screen-sm)中型设备(桌面,992px及以上):@ media(min-width:@ screen-md)大型设备...
  • 0 votes
     answers
     views

    覆盖Bootstrap断点

    Bootstrap使用其设置的媒体查询来定义其断点 . 我想改变断点而不通过并更改bootstrap.min.css文件中的px值 . 无论如何,有一个媒体查询添加到我自己的css文件,将覆盖bootstrap的例如:Bootstrap: @media (min-width:992px) and (max-width:1199px){ .visible-md-inline-block{ ...
  • 6 votes
     answers
     views

    CSS媒体查询捕获高分辨率手机,但不是低分辨率平板电脑

    我一直在使用 min-width: 600px 作为我的CSS媒体查询中的断点 . 我的理由是,在600px及以上我会捕捉平板电脑设备(Kindle Fire,iPad等),600px以下会捕获所有手机设备 . 事实证明,虽然iPhone的像素增加了一倍,但仍然报告为320px x 480px,但有大量Android手机的分辨率如700px x 1280px . 问题是,如何在不给它们提供类似平板...
  • 3 votes
     answers
     views

    针对目标移动设备(第一),平板电脑和桌面的特定媒体查询

    我正在构建一个响应式布局,首先默认为移动(1列),然后是横向和纵向模式下的平板电脑的断点,最后是桌面 . 对于我的平板电脑(1列)断点 . @media(min-device-width:768px)和(max-device-width:1024px)和(orientation:portrait) @media(min-device-width:768px)和(max-device-wid...
  • 0 votes
     answers
     views

    @media查询,最大设备宽度和桌面浏览器

    有没有人遇到“max-device-width”的问题并且有渲染问题 . 我的印象是“max-device-width”仅在手机,平板电脑和移动设备上呈现,而不是在桌面浏览器上呈现 . 对我来说,它是在桌面浏览器上呈现 . 当设置浏览器并加载带有@Media查询的css文件的初始加载时,会发生这种情况 . 所以,如果我有 @media屏幕和(最大宽度:500px),屏幕和(最大设备宽度:1280p...
  • 8 votes
     answers
     views

    如何使用媒体查询定位平板电脑而不是IE9

    我发现IE9正在为我的网站采用平板电脑样式 . @media (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait), (min-device-width : 768px) and (max-device-width : 1024px) and (orientati...
  • 1 votes
     answers
     views

    针对1024px的媒体查询,但桌面和平板电脑的显示方式不同?可能?

    我正在使用标准媒体查询以像素为单位定位各种断点(例如@media屏幕和(最小宽度:768px)和(最大宽度:1024px))但我被要求在1024px上为桌面显示不同的布局和相同的1024px宽度的平板电脑不同 . 这甚至可能吗?据我所知,事实并非如此,但我想我会在这里得到建议以确保 . 谢谢 :)
  • 0 votes
     answers
     views

    媒体查询不适用于手机屏幕中的Android屏幕720 * 1280

    我正在开发具有响应性CSS的phonegap中的android应用程序 . 我的应用程序适用于所有屏幕,但媒体查询不适用于720 * 1280.我的媒体查询如下所示 @media only screen and(min-device-width:768px)and(max-device-width:1024px){} @media only screen and(min-device-wi...
  • 0 votes
     answers
     views

    媒体:如何自动设置移动和桌面屏幕大小

    我一直在设计一个underconstruction页面check here,它在浏览器屏幕上很好但是当我从移动设备或平板电脑设备打开它时,它会被破坏,它迫使我使用css断点 . 我试图使用断点,但我有很多div,我必须在每个div中创建尺寸和位置,这太过分了 . 我尝试使用“@media only screen and(min-device-width:320px)和(max-device-wid...
  • 17 votes
     answers
     views

    仅限移动设备上的响应式CSS样式

    我正在尝试让我的响应式CSS样式在平板电脑和智能手机上运行 only . 基本上我有桌面风格,移动风格:肖像和移动风格:风景 . 我不希望移动样式干扰桌面演示 . 我玩过无数媒体查询,但结果是移动样式显示在桌面上,或者移动样式仅在移动设备上显示,但只有一组规则(无响应) . 有没有办法让两者完全分开? 我现在的代码是这样的: /* regular desktop styles */ @medi...
  • 66 votes
     answers
     views

    我应该使用max-device-width还是max-width?

    使用CSS媒体查询,您可以使用 max-device-width 来定位设备宽度(例如iPhone或Android设备)和/或以页面宽度为目标的 max-width . 如果您使用 max-device-width ,当您更改桌面上浏览器窗口的大小时,CSS会更改't change, because your desktop doesn' t更改大小 . 如果您使用 max-width ,当您更...
  • 1 votes
     answers
     views

    为什么响应式网页设计在具有相同分辨率但不同ppi的屏幕上有不同的响应?

    使用媒体查询时,您可以相应地设置min-width属性和设计,但我正在使用我的桌面和手机进行测试 . 我的手机分辨率为1080p,与我的桌面显示器相同,但设计在两个屏幕上的反应都不同 . 应该表现得一样不应该吗?我错过了什么?如果我只使用像素,他们为什么表现不同?
  • 8 votes
     answers
     views

    媒体查询屏幕大小而不是分辨率

    是否有解决方法在CSS媒体查询中使用物理屏幕宽度?今天,有些手机超过了桌面显示器的分辨率 . 但是,手机应该仍然显示移动布局和桌面标准布局 . 所以我不能像下面的例子那样依赖基于像素的查询 . 相反,我需要一个物理测量,或者一个关于像素密度的测量 . @media screen and (min-width: 700px) { } 由于我没有通过我的研究找到这样的测量,它们可能不存在 . 无论...
  • 0 votes
     answers
     views

    小型设备的响应式表格设计 - 表格{“display:block”}

    在我的表格表格中使用"display:block"时,我在Chris Coyier article上为我的响应表设计提供了一个很好的解决方案 . /* Force table to not be like tables anymore */ @media only screen and (min-width: 0px){table, thead, tbody, th, td, ...
  • 411 votes
     answers
     views

    媒体查询中“屏幕”和“仅屏幕”之间有什么区别?

    媒体查询中“屏幕”和“仅屏幕”之间有什么区别? <link media="screen and (max-device-width: 480px)" rel="stylesheet" href="m.css" /> <link media="only screen and (max-device-width: ...
  • 2 votes
     answers
     views

    媒体查询问题

    我正在一个网站上工作,我正在尝试将其正确格式化以便在iPhone上工作 . 当您访问iPhone上的页面时,它会执行媒体查询所说的内容,但一切都非常小 . 它没有像我预期的那样放大 . 我希望网站能够在手机上占据整个屏幕 . 图片附在此处,我的网站链接是:http://vacavall.mysite.syr.edu/weather_rc 这是一个链接,看看它在iPhone上的样子:https://...
  • 6 votes
     answers
     views

    有多少百分比的移动浏览器支持CSS媒体查询?

    我正在开发一个支持移动设备的新网站,我想尝试使用“响应式设计”/“自适应设计”/ CSS媒体查询 . 我想知道最近是否有关于支持媒体查询的移动浏览器的报道 . 如果不是,那么什么是合理的近似值?
  • 3 votes
     answers
     views

    媒体查询/根据屏幕大小加载不同的图像

    这可能是基本的,但我迷失在我在网上找到的所有解决方案中 . 我有一个基于Twitter Bootstrap 3的运行网站(www.webstalab.com),但使用的图像(描绘两个拿着球的雕像)的尺寸相当大(大约900kb),因此在较慢的互联网连接上加载时间过长 . 目前的照片宽1920像素,是响应的,它不是背景图像 . (我无法使用背景图像方法实现所需的布局) . 我想要做的就是创建同一张照...
  • 0 votes
     answers
     views

    媒体查询 - 手机百分比和桌面像素?

    我有这个小社交网络,有几千个用户 . 事情是它在980px时是静态的 - 当时很棒 . 现在我需要重新设计网站,并希望针对手机,平板电脑以及更大的桌面进行优化 . 该网站本身非常复杂,设计独特,因此液体网页设计已不再适用 . 我需要对元素进行很多控制,所以我选择了响应 . 我正在阅读很多关于这个主题的内容,并在99designs.com上阅读,他们针对3个特定的媒体查询: 小:600px以下 . ...
  • 0 votes
     answers
     views

    Mozilla媒体查询移动视图

    嗨,我正在尝试使我的网站响应 . 现在,我有一个媒体查询,可以处理特定屏幕尺寸的设备,但在通过网络查看时具有不同的样式 . 它适用于铬,野生动物园和歌剧 . 但是当在mozilla中尝试时,似乎我的媒体查询正在执行,尽管我通过桌面访问它 . 有什么我想念的吗?以下是我的媒体查询 .my-target-class { display: inline; } @media only screen...
  • 4 votes
     answers
     views

    css媒体查询处理新的高分辨率手机,而忽略平板电脑

    根据我的研究;新款智能手机的人像分辨率高达800px片剂miniumum肖像分辨率600px 现在我正在尝试使用媒体查询将移动css渲染到支持分辨率高达800px的手持设备,但我遇到的问题是像ipad1这样具有768px纵向分辨率的旧平板电脑也在渲染移动css . 我需要确保600px及更高版本的平板电脑渲染宽屏css,而最大肖像分辨率为800px的手机渲染移动css . 尽管移动和平板电脑宽度交...
  • 9 votes
     answers
     views

    针对三星s6的CSS媒体查询

    请帮忙 . 任何机构都可以告诉我有关三星s6的CSS中的媒体查询更具响应性吗? @media only screen and (min-device-width : 360px) and (max-device-width : 640px) and (-webkit-min-device-pixel-ratio : 3) { // code here } 从哪里可以测试三星s6的响应式设计...
  • 2 votes
     answers
     views

    媒体查询两个决议

    我正在搜索如果他/她的屏幕分辨率如下所示,隐藏部分显示给用户: 如果宽度<1024px且高度<640px 和最小宽度1440px和高度<900px 然后显示div . 我一直在努力与最小宽度,最大高度,但没有运气 . 例如:@media screen(max-width:1023px)和(max-height:639px)和(min-width:1440px)和(max-heig...
  • 3 votes
     answers
     views

    Twitter Bootstrap:更改了导航栏崩溃阈值,对下拉列表产生了副作用

    我正在使用 Twitter Bootstrap 2.1.1 并使用类似于此示例的导航栏折叠和导航栏下拉列表Twitter Bootstrap Github page 我知道它在979px处崩溃并在980px处扩展,然后我将其更改为779px,基于 accepted answer : How to change navbar collapse threshold using Twitter boot...
  • 2 votes
     answers
     views

    响应列表和第n个子选择器

    我在理解nth-child时遇到问题,以便使用媒体查询设置列表的样式 . 我有一个无序的6items列表,使用 display:inline-block; 以下列方式水平显示项目: [item1] [item2] [item3] .... [item6] ul { list-style-type: none; margin-left: auto; padding:0; ...
  • 0 votes
     answers
     views

    移动视图上每个元素的宽度不会100%

    我使用html5 PHP和bootstrap创建我的网站 . 我没有在我的CSS中设置_15317或其他任何内容,因此必须将其设置为默认值 . 但是,当我尝试在Mobile上查看它时,这就是它的样子 它不完整吗?是因为我在图像2上的表吗?我试图用@media修复它,但我仍然找不到解决方案 . 请帮我 :(

热门问题