首页 文章

HTML / CSS / JavaScript中的哪个位置是移动格式处理？

提问于
浏览 次
0

请考虑以下网站：200minus.com

这个网站在手机和桌面上看起来都不错 . 就好像当你在手机上查看网站时，一切都在适当缩小 . 源代码（HTML / CSS / JavaScript）中的哪个被处理（或者这通常是处理）？

javascript html css

4 回答

  • 2

    这是移动/桌面情境中页面设计的两种典型方法 .

    • 调整页面以适合加载时显示的大小 .

    要么...

    • 使页面动态响应它的大小（这称为响应式设计） .

    它被认为是使用响应式设计的好形式，因为它对屏幕调整大小具有明显的优势 . 例如，如果平板电脑/手机已旋转或桌面用户调整了窗口大小 .

    一个好的设计应该主要在css中实现，因为它是更新/评估页面中最快的部分，并且比修改页面样式比JS更容易实现 . 在制作适用于多种屏幕尺寸的布局时，比例布局和前瞻性规划有很大帮助，许多指南将指导您首先设计移动设备，然后针对桌面站点进行调整 . 就个人而言，我试着将它们视为一个从不固定尺寸的部分 .

    响应式设计的面包和黄油是媒体查询;它们允许您仅在一个或多个条件下激活某些css规则 . 例如：

    @media (min-width:650px){ 
        .about_tablet{height:175px;}
}

@media (min-width:650px) and (max-width: 675px){ /* both conditions must be met */
        .about_tablet{height:175px;}
}

@media (min-width:650px) , (max-width: 675px){ /* one or both conditions must be met */ 
        .about_tablet{height:175px;}
}

    另一个非常有用的技巧是视口

    <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no,width=device-width" />

    它们可能有点奇怪，桌面上的行为根本不起作用，但它们非常有用 . 您可以逐个像素地强制页面宽度和缩放页面（例如，在400px宽屏幕上为800像素图像） . 防止用户放大或限制缩放 . 最有用的是 width=device-width" ，它可以防止您在手机上查看时在非优化网页上获得的可怕的缩小效果 .

    如果您想谈谈更具体的概念，我很乐意提供帮助，我的绝大部分工作都是针对手机完成的 .

    回复于
  • 0

    在CSS中作为媒体查询 .

    您可以根据正在查看的浏览器窗口的大小来调整CSS样式的布局 .

    回复于
  • 2

    这很简单Bootstrap . 试试吧！我觉得这真的很棒 . 在上面的答案中也提到这是用CSS完成的所有事情 . 例如：

    @media (min-width:768px){.container{width:750px}
}
@media (min-width:992px){.container{width:970px}
}
@media (min-width:1200px){.container{width:1170px}
}

    当宽度小于992像素时，容器将设置为750像素 .

    问候

    回复于
  • 3

    在CSS中使用媒体查询，如下所述：http://css-tricks.com/css-media-queries/

    例如：

    @media screen and max-width:600px { /* CSS here */ }

    是我使用的常见制动点 .

    对于某些特定的处理，我发现我必须使用javascript或jQuery才能真正得到我想要的效果，但一般来说CSS媒体查询以及显示/隐藏具有display属性的对象的智能和创造性使用将获得99％的那边的路 .

    回复于

相关问题