how to make the whole webpage look smaller (just like zoom out function of chrome) using CSS or JQuery?

Question

Hi I am a beginner in web dev and I built a page on my ultra-wide 3k display without realizing everything looks so big on regular sized displays. But when I use zoom function in chrome to reduce it to 75% then it looks perfectly fine. Is there anyway to achieve this with css or js?

Answer 1

Wow you have a lot to learn my friend

Here are some things to get you started

• Responsive Design

• Mobile Responsive Design

• Bootstrap

• Screen sizes and break points for responsive design

• Media Queries

Answer 2

I would suggest :

Either use Bootstrap or Foundation or any such framework so that you don't have to worry much about the sizing of your page on different devices.

Read : http://www.html5rocks.com/en/mobile/responsivedesign/

Answer 3

您必须使用媒体查询，这是最新的媒体查询，只需将其复制并放入您的CSS代码gist.github.com/needim/d15fdc2ac133d8078f7c