Home > Backend Development > PHP Tutorial > javascript - How to make the generated div adapt to the mobile phone screen

javascript - How to make the generated div adapt to the mobile phone screen

WBOY
Release: 2016-07-06 13:51:44
Original
1499 people have browsed it

How to make the generated div adapt to the mobile screen

Reply content:

How to make the generated div adapt to the mobile screen

Use bootstrap, which can achieve the responsive layout you need. Use .col-xs- .col-sm- .col-md- .col-lg- in the div. In addition, there are other tags Responsive layout can also be implemented, see http://www.runoob.com/bootstrap/bootstrap-grid-system.html for details. You can also use webapp frameworks such as jQuery Mobile

Set position to fixed, and then give top and bottom a fixed value

Write width and height in percentage, or use rem units.

There are several points to pay attention to when manually implementing responsive layout:
1. The width is set to a percentage, and all floats. Setting the height to a percentage is invalid
2. CSS media query technology can use multiple links to separate various types. The screen resolution imports your css code but the number of requests is too many. It is not recommended. You can use @media screen and (max-width=375px) {the css code you need to render the style}. Use the chrome console to see the width of the device you want
3. Define the viewport in meta and tell the html page that you want it to be adaptive
4. Use max-width for img
5. Use fonts em

I am also a novice, I suggest lz system to learn responsive layout, otherwise there will be many pitfalls, or write directly with bootstrap and just read the manual

Personally, I think this question: ‘How to set a div to the screen size in the browser’ is a problem.
In this case I would do:
google or baidu but it would be better to google => html - Set div width equal to window size - Stack Overflow

Give you a link:
stackoverflow
google

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template