Javascript 我应该避免使用px使react应用程序对移动设备友好吗?

Javascript 我应该避免使用px使react应用程序对移动设备友好吗?,javascript,css,reactjs,mobile,frontend,Javascript,Css,Reactjs,Mobile,Frontend,让我的webapp手机变得友好的好方法是什么?我一直在使用px,但我应该只使用大众和vh吗?还有,我应该在css中使用@media一百万次吗 这是一个很好的电子表格: 从我的经验可以说: 如果希望根据父块设置大小,请使用%(百分比) 如果要根据屏幕大小设置大小,请使用vw/vh 像往常一样使用rem/em 这是一个相当广泛的话题。然而,这里有一些东西可以帮助你 px不错,有很多用例。例如,在设置对象的高度时,我倾向于使用px。由于响应性通常与宽度相关,因此变得有点棘手,但您可以使用minwidt

让我的webapp手机变得友好的好方法是什么?我一直在使用px,但我应该只使用大众和vh吗?还有,我应该在css中使用@media一百万次吗

这是一个很好的电子表格:

从我的经验可以说:

  • 如果希望根据父块设置大小,请使用
    %
    (百分比)
  • 如果要根据屏幕大小设置大小,请使用
    vw/vh
  • 像往常一样使用
    rem/em

  • 这是一个相当广泛的话题。然而,这里有一些东西可以帮助你

    px
    不错,有很多用例。例如,在设置对象的高度时,我倾向于使用
    px
    。由于响应性通常与宽度相关,因此变得有点棘手,但您可以使用
    minwidth
    max width
    等方法开始考虑响应性

    您也可以使用百分比,但是我个人喜欢使用css布局,如
    flexbox
    grid
    来设置我的站点。因为他们倾向于更灵活。因此,部分响应性设计已经通过使用css布局模块实现

    一般来说,在如何使页面响应方面没有硬性规定,因为每个网站都是不同的。你会发现数百个网站为你提供了人类已知的每种屏幕大小的
    @media
    大小,但更重要的是,看看你的网站,看看内容在增长或收缩时自然开始破裂的地方。然后,您可以更准确地确定希望您的
    @媒体
    何时生效


    最后,您不需要使用
    @media
    一百万次,只需要在您决定布局需要更改的地方使用。然后,只需在单个
    @media
    中实现css更改,即可在特定的屏幕大小以及小于或大于该屏幕大小的情况下更改所有内容

    带有断点的百分比是一种很好的方法。它为您的设计提供了流动性,同时允许不同尺寸的不同布局。我真的会研究网格框架的移动友好设计,它会帮助你很多,让你的生活更轻松。所以,基本上我应该总是使用大众或vh?1。在任何情况下,您都将使用@media,因为在移动设备上,某些块的宽度应为80%,而在计算机/笔记本电脑上,这些块的宽度仅为65-70%。2.我不能说“只用它”,因为它的位置不对大众和vh是相似的,但它们解决问题的方式不同。只有经过多次尝试,你才能得到它。有时我会忽略这两个,而使用flex-box。如您所见,这取决于任务。