使网站动态，以便跨屏幕工作

Question

我有一个网站上有预先编写的html（我们无法更改）。但是，我们可以编写自己的CSS，使其看起来更具吸引力。

问题是该网站在笔记本电脑上运行良好但我的CSS无法在手机屏幕上运行。我对CSS知之甚少，也不了解JavaScript（人们说它更具动态性）。

HTML代码非常庞大，我想知道如果没有它就能获得解决方案。

我从html标签开始 像：

html{

我相信我必须改变一些事情。我是这样的新人所以请原谅我提出这样的问题。非常感谢。

Answer 1

您可能希望使用媒体查询。

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

如果没有看到HTML，很难准确地说出你需要用什么进行媒体查询，但这最有可能让网站在手机上看起来很棒，因为它们允许你根据屏幕尺寸（以及其他内容）动态更改样式。

这称为响应式网页设计。

Answer 2

您基本上需要修改和扩展CSS，以便根据您支持的设备和浏览器来满足各种屏幕尺寸和分辨率。

您可以通过adaptive或responsive方法执行此操作。 这个东西并不新鲜。

自适应方法会更容易，您基本上会为每个支持的分辨率声明一个单独的样式表 - 但响应是更好的练习;你最终会以一种响应布局和分辨率变化的方式编写你的CSS。

HTML 不是一个问题。看看你想要/需要支持的CSS和浏览器/设备，并研究我上面概述的一些信息。希望这会有所帮助。

Answer 3

绝对必须使用媒体查询。

这是一个例子：

HTML

<div class="caja"> 
   <p>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nulla 
     massa, hendrerit non rutrum sed, blandit vestibulum velit. Cum sociis 
     natoque penatibus et magnis dis parturient montes, nascetur ridiculus 
     mus. Mauris ut volutpat mauris, et fringilla sem.
   </p> 
</div>

CSS。

p {
  margin: 0;
  padding: 20px;
  background: #f1f1f1;
}

.caja {  
  margin: 0 auto;
  width: 500px;
}

@media only screen and ( max-width: 700px ) {
  .caja {
    width: 100%;
  } 
}

这将是结果。

您可以查看此链接，并确保如何适应您想要的任何设备或屏幕尺寸。

https://www.sitepoint.com/creating-media-queries-for-responsive-web-designs/

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

https://www.w3schools.com/css/css_rwd_mediaqueries.asp