首页 文章
  • 0 votes
     answers
     views

    Wordpress模板和基本移动设备优化问题

    好的,首先: 1)我必须发送链接2)无法设置jsfiddle :) 好吧,所以,我遇到了关于wp主题的奇怪问题 - 实际上,我不确定它是如何在(现代)移动设备上工作的 . 我刚刚开始进行优化,但还有很多东西,但是...... 网站是:http://bybyweb.com/lsg/ 在http://www.mobilephoneemulator.com/它看起来很好,但是 - 我很担心,因为我的旧诺...
  • 0 votes
     answers
     views

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

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

    具有CSS网格和自动调整minmax的完全响应项目

    使用 grid-template-columns: repeat(auto-fit, minmax(600px, 1fr)) 可以轻松构建响应式CSS网格 . 容器将填充适合行的任意数量的元素,而不使用媒体查询 . .container { display: grid; grid-gap: 5px; grid-template-columns: repeat(auto-fit, min...
  • 0 votes
     answers
     views

    Heroku App的媒体查询在桌面而非移动设备上工作(尽管尝试了多种解决方案)

    救命!我创建了一个Heroku应用程序,我的CSS3 @media查询不是通过调整chrome和firefox中的页面来检查的 . 我已经在我的html文档中包含了视口元标记: <meta name =“viewport”content =“width = device-width,initial-scale = 1.0,minimum-scale = 1.0,maximum-scale ...
  • 0 votes
     answers
     views

    如何实现:root {font-size:calc(100vw / 40);缩放字体大小

    根据CSS Values and Units Module Level 3, W3C Candidate Recommendation 8.1 Mathematical Expressions: ‘calc()’: 以下设置'font-size',以便恰好40em适合视口,确保无论屏幕大小如何,大致相同数量的文本总是填满屏幕 . :根 {font-size:calc(100vw / 40);}...
  • 350 votes
     answers
     views

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

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

    定位Safari移动设备,但不定位iPad

    我正在尝试添加特定的样式表和脚本,如果用户正在iPhone或移动safari设备上查看该站点 . 目前我正在使用下面的内容,但这是针对iPad的 . 是否有一些我可以用来定位iPhone的代码? var isSafari = !! navigator.userAgent.match(/ Version / [\ d . ] . * Safari /); if (isSafari) { d...
  • 1 votes
     answers
     views

    Lotus 中的 CSS 媒体查询客户端

    所以,我们有一个 XPage 应用程序,它适用于所有浏览器,包括内部注释浏览器。因为,我们的目标受众都是 desktop/mobile 用户,我们使用 css 媒体查询设计了一个响应式布局,这在浏览器上运行良好,但是,我们发现当它作为笔记应用程序运行时,它不尊重媒体查询。它的工作方式就像没有媒体查询一样(例如,甚至桌面上也会显示移动特定项目)。有什么建议让它工作?我们很远,删除媒体查询将是最后的选...
  • 1 votes
     answers
     views

    IE11:如何防止精灵动画来纠正合作

    按照惯例,在网站的左上角,我放置了一个包含在主页链接中的公司徽标 . 该图像属于精灵,同时具有相同图像的不同尺寸(以及其他图像) . 该网站具有响应式CSS,因此相关元素的默认背景图像是较小的移动版本,媒体查询选择桌面浏览器的较大版本 . 但是,当在Internet Explorer 11中加载页面时,您可以看到正在操作的图像的较大版本 . 事实上,如果你点击图标重新加载主页就会变得非常明显:精灵...
  • 1 votes
     answers
     views

    在Foundation 6上添加其他断点(仅限CSS)?

    所以当涉及到现代网络开发时,我有点像菜鸟,并且决定通过从头开始创建一个简单的单页面网站来重新开始 . 因为我非常喜欢,所以我决定和基金会一起去 . 我已经完成了,但我的媒体查询遇到了麻烦 . 我知道Foundation 6包含3个断点(小,中,大),我可以为每个断点添加媒体查询样式 . 但是,我希望制作的风格只能出现在技术上处于“中等”范围内的小范围视口宽度,但在较大的一端 . 现在,medium...
  • 163 votes
     answers
     views

    $(window).width()与媒体查询不同

    我在一个项目上使用Twitter Bootstrap . 除了默认的bootstrap样式,我还添加了一些自己的样式 //My styles @media (max-width: 767px) { //CSS here } 当视口的宽度小于767px时,我也使用jQuery来更改页面上某些元素的顺序 . $(document).load($(window).bind("resi...
  • 0 votes
     answers
     views

    表格宽度在移动设备上奇怪缩小

    我正在设计一个网站,我正在设计移动版本/大小的表格越来越小 . 我已经检查过,这不是标签未被封闭或格式错误的问题;代码在html5中验证 . 我在桌面或平板电脑版本中没有出现此错误,但是当应用移动版本的媒体查询时,它会缩小 . 对不起,这可能是一个非常复杂的问题! 这是代码: <table id="general"><tr> &l...
  • 375 votes
     answers
     views

    媒体查询:如何定位桌面,平板电脑和移动设备?

    我一直在研究媒体查询,但我仍然不太了解如何定位某些尺寸的设备 . 我希望能够定位台式机,平板电脑和移动设备 . 我知道会有一些差异,但是有一个可以用来定位这些设备的通用系统会很不错 . 我找到的一些例子: # Mobile only screen and (min-width: 480px) # Tablet only screen and (min-width: 768px) # Desk...
  • 0 votes
     answers
     views

    rem媒体查询和移动

    我想改变我正在构建的网站的设计,以便为移动用户提供更好的用户体验 . 我已经阅读了有关媒体查询的内容,即使我不确定它是什么方式,我还是不明白:我的电脑屏幕是1920x1080 . 我刚查过iphone 6的屏幕是一样的 . 所以1920/16 = 120.所以我的电脑屏幕是120rem宽 . 如果我的媒体查询仅适用于119以下,它是否适用于iphone 6(或任何具有该屏幕规格的手机)? 我问,因...
  • 0 votes
     answers
     views

    Roots Theme 6.4消失的主页内容随着屏幕尺寸的减小

    美好的一天, 我今天注意到,由于某些原因使用WordPress 3.6.1和Roots 6.4.0,主页在页脚和徽标之间有空白内容 . 但是,它只发生在主页上,在任何其他页面上都能正常工作,而且最近才发生 . 您可以查看网站:http://jsteinhi.com . 我问有人请检查出来,并告诉我这是否是媒体查询问题,CSS,PHP或WordPress问题 . 我想知道,所以我可以再次避免这种情况...
  • 1 votes
     answers
     views

    如何使用Materialize Design在行中设置五列?

    我正在使用物化设计框架来响应html页面 . 我们可以轻松地连续管理2,3,4列 . 但是现在我想连续显示5列 . <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css"> ...
  • 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特异性...
  • 3 votes
     answers
     views

    基于IE8和REM的媒体查询

    我想将我的媒体查询基于REM,以支持用户调整各种浏览器缩放和/或基本/浏览器字体大小 . 理想情况下,IE8 . 加载jQuery,HTMLshiv,Respond和REM polyfill,结果显示REM polyfill不支持媒体查询 . 真的不明白为什么,https://github.com/chuckcarpenter/REM-unit-polyfill/issues/60#issueco...
  • 75 votes
     answers
     views

    使用Sass变量和CSS3媒体查询

    我正在尝试将Sass变量的使用与@media查询结合使用,如下所示: $base_width:1160px; @media screen and (max-width: 1170px) {$base_width: 960px;} @media screen and (min-width: 1171px) {$base_width: 1160px;} 然后在基于样式表宽度百分比的测量中的各个点处...
  • 4 votes
     answers
     views

    使用rems在媒体查询中指定断点[关闭]

    我使用rems在媒体查询中指定断点,如下所示 @media screen and (min-width: 30rem) {} 如果 body {} 中未定义基本字体大小,则它将继承浏览器默认字体大小 . 我听说使用 rems 是最好的做法 . 我的问题是,如果用户更改浏览器默认字体大小,则媒体查询将不会以预期的屏幕大小为目标 . 例如: 30rem (width of view port) = ...
  • 5 votes
     answers
     views

    字体大小和设备像素比

    假设我将默认字体大小设置为16px(这应该是多余的,因为它在大多数浏览器中是默认的): 为简洁起见,我的网站包含一些尺寸为10em x 10em的盒子 . body, html { font-size: 16px; } .box { border: 1px green solid; background-color:green; width:10em; h...
  • 0 votes
     answers
     views

    基金会Zurb媒体查询

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

热门问题