목차
回复内容:
백엔드 개발 PHP 튜토리얼 javascript - 如何让生成的div自适应手机屏幕

javascript - 如何让生成的div自适应手机屏幕

Jul 06, 2016 pm 01:51 PM
android css html javascript php

如何使生成的div自适应手机屏幕

回复内容:

如何使生成的div自适应手机屏幕

用bootstrap吧,能实现你需要的响应式布局,div用里面的.col-xs- .col-sm- .col-md- .col-lg-,除此之外还有其他的标签也可以实现响应式布局,详见http://www.runoob.com/bootstrap/bootstrap-grid-system.html。你也可以使用Webapp框架,如jQuery Mobile

设position为fixed,然后top跟bottom给一个固定值

宽高写百分比,或者用rem单位。

手工实现响应式布局有这几个注意点:
1.宽度设置成百分比,并且全部浮动,高度设百分比无效
2.css媒体查询技术 可以用多个link分各种屏幕分辨率导入你的css代码但请求次数过多,不推荐,可以用@media screen and (max-width=375px){你所需要呈现样式的css代码}。用chrome控制台可以看到你想要的设备的宽度
3.在meta里定义viewport 告诉html页面你要它实现自适应
4.img使用max-width
5.字体使用em

我也是新手,建议lz系统的学习一下响应式布局,不然坑很多,或者直接用bootstrap写 看看说明书就可以

个人觉得,这个问题: ‘如何在浏览器中将一个div设置成屏幕大小’ 是一个问题。
这样的话我会这么做:
google或者baidu 但是最好还是google => html - Set div width equal to window size - Stack Overflow

给你一个链接吧:
stackoverflow
google

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

Vue에서 부트 스트랩을 사용하는 방법 Vue에서 부트 스트랩을 사용하는 방법 Apr 07, 2025 pm 11:33 PM

vue.js에서 bootstrap 사용은 5 단계로 나뉩니다 : Bootstrap 설치. main.js.의 부트 스트랩 가져 오기 부트 스트랩 구성 요소를 템플릿에서 직접 사용하십시오. 선택 사항 : 사용자 정의 스타일. 선택 사항 : 플러그인을 사용하십시오.

HTML, CSS 및 JavaScript의 역할 : 핵심 책임 HTML, CSS 및 JavaScript의 역할 : 핵심 책임 Apr 08, 2025 pm 07:05 PM

HTML은 웹 구조를 정의하고 CSS는 스타일과 레이아웃을 담당하며 JavaScript는 동적 상호 작용을 제공합니다. 세 사람은 웹 개발에서 의무를 수행하고 화려한 웹 사이트를 공동으로 구축합니다.

HTML, CSS 및 JavaScript 이해 : 초보자 안내서 HTML, CSS 및 JavaScript 이해 : 초보자 안내서 Apr 12, 2025 am 12:02 AM

WebDevelopmentReliesonHtml, CSS 및 JavaScript : 1) HtmlStructuresContent, 2) CSSSTYLESIT, 및 3) JAVASCRIPTADDSINGINTERACTIVITY, BASISOFMODERNWEBEXPERIENCES를 형성합니다.

HTML에서 React의 역할 : 사용자 경험 향상 HTML에서 React의 역할 : 사용자 경험 향상 Apr 09, 2025 am 12:11 AM

React는 JSX와 HTML을 결합하여 사용자 경험을 향상시킵니다. 1) JSX는 개발을보다 직관적으로 만들기 위해 HTML을 포함시킨다. 2) 가상 DOM 메커니즘은 성능을 최적화하고 DOM 운영을 줄입니다. 3) 유지 보수성을 향상시키기위한 구성 요소 기반 관리 UI. 4) 상태 관리 및 이벤트 처리는 상호 작용을 향상시킵니다.

클래스가 확장되지 않거나 방법이 PHP에서 무시되지 않도록하려면 어떻게해야합니까? (최종 키워드) 클래스가 확장되지 않거나 방법이 PHP에서 무시되지 않도록하려면 어떻게해야합니까? (최종 키워드) Apr 08, 2025 am 12:03 AM

PHP에서 최종 키워드는 클래스가 상속되고 메소드가 덮어 쓰는 것을 방지하는 데 사용됩니다. 1) 클래스를 최종적으로 표시 할 때는 수업을 상속받을 수 없습니다. 2) 메소드를 최종으로 표시 할 때는 메소드를 서브 클래스로 다시 작성할 수 없습니다. 최종 키워드를 사용하면 코드의 안정성과 보안이 보장됩니다.

PHP의 미래 : 적응 및 혁신 PHP의 미래 : 적응 및 혁신 Apr 11, 2025 am 12:01 AM

PHP의 미래는 새로운 기술 트렌드에 적응하고 혁신적인 기능을 도입함으로써 달성 될 것입니다. 1) 클라우드 컴퓨팅, 컨테이너화 및 마이크로 서비스 아키텍처에 적응, Docker 및 Kubernetes 지원; 2) 성능 및 데이터 처리 효율을 향상시키기 위해 JIT 컴파일러 및 열거 유형을 도입합니다. 3) 지속적으로 성능을 최적화하고 모범 사례를 홍보합니다.

HTML의 역할 : 웹 컨텐츠 구조 HTML의 역할 : 웹 컨텐츠 구조 Apr 11, 2025 am 12:12 AM

HTML의 역할은 태그 및 속성을 통해 웹 페이지의 구조와 내용을 정의하는 것입니다. 1. HTML은 읽기 쉽고 이해하기 쉽게하는 태그를 통해 컨텐츠를 구성합니다. 2. 접근성 및 SEO와 같은 시맨틱 태그 등을 사용하십시오. 3. HTML 코드를 최적화하면 웹 페이지로드 속도 및 사용자 경험이 향상 될 수 있습니다.

PHP 및 Python : 두 가지 인기있는 프로그래밍 언어를 비교합니다 PHP 및 Python : 두 가지 인기있는 프로그래밍 언어를 비교합니다 Apr 14, 2025 am 12:13 AM

PHP와 Python은 각각 고유 한 장점이 있으며 프로젝트 요구 사항에 따라 선택합니다. 1.PHP는 웹 개발, 특히 웹 사이트의 빠른 개발 및 유지 보수에 적합합니다. 2. Python은 간결한 구문을 가진 데이터 과학, 기계 학습 및 인공 지능에 적합하며 초보자에게 적합합니다.

See all articles