html - How to create web pages for all resolutions (both mobile device and computer) -

I am trying to write a small device to convert images and text files into HTML pages.

The layout of my HTML page is simple:

The problem is, when I adjust the HTML page for computer browsers, the font for the mobile browser is too small.

When I adjust the HTML page for the mobile browser, the page also contains ugly in the computer browser.

I do not know much about CSS. Is there any way to create an HTML page for all offers? Or I have to create two types of HTML pages, one for another browser for the computer browser and one for the mobile browser.

---

I talked about this problem with our UI designers. They told me, I have to use several CSS files + images with different sizes. It seems that we were in the last century.

Finally, I'm getting this tool, which is great for this HTML page.

What you are searching for is

There are many peters that are useful for this. The most important thing is:

  @ media all and (max-width: 1024px) {...}  

This is where you have different- Let's define different style sheets for different browser sizes, this way your site will cover smartphones, tablets and large desktops. Use a compact and comfortable layout for the smartphone and say, use a common layout for a minimum-width of 1024px .

For touch optimization, you have to do this anyway. Nowadays, you can not publish a website, which does not have any touch optimization. But do not worry, this is a small part of your problem because basic touch features do not require much optimization.

In addition to this, you want to set viewport too is important for mobile devices!

  & lt; Meta name = "viewport" content = "width = device-width" & gt;