在自己电脑上做了一个网站,在其他电脑上看发现全乱了_html/css_WEB-ITnose
当屏幕小时会出现滚动条,可我不想有横向滚动条,也不想裁剪内容
之后利用css媒体查询创建响应式。可效果还是不如意
回复讨论(解决方案)
本人知识不多,请各位讲解详细一点,先谢谢了!~~~
*{
width:100%
}
怎么看都觉得不对
如果自己感觉对页面的控制能力不好,就不要做响应式
http://tongji.baidu.com/data/screen 这是baidu 的统计的分辨率使用情况。
给页面定一个固定宽度,里面元素固定写死宽度。
少用媒体查询,那玩意越弄越累。只在少数情况下定制一下就好。
--------------------
如果要做响应式,页面最大的容器,根据媒体查询定几个宽度
然后嵌套每行的容器,宽100%
行容器再嵌套小区块容器,每个容器指定像素宽度 float:left。当前浏览器的分辨率较小时,会把这些小区块“挤”成纵向排列的。分辨率较大时,小区块会横向排列。
如果不用像素限制小区块宽度的话,也可以3个小区块都是33%的宽度。指定百分比宽度。
如果自己感觉对页面的控制能力不好,就不要做响应式
http://tongji.baidu.com/data/screen 这是baidu 的统计的分辨率使用情况。
给页面定一个固定宽度,里面元素固定写死宽度。
少用媒体查询,那玩意越弄越累。只在少数情况下定制一下就好。
--------------------
如果要做响应式,页面最大的容器,根据媒体查询定几个宽度
然后嵌套每行的容器,宽100%
行容器再嵌套小区块容器,每个容器指定像素宽度 float:left。当前浏览器的分辨率较小时,会把这些小区块“挤”成纵向排列的。分辨率较大时,小区块会横向排列。
如果不用像素限制小区块宽度的话,也可以3个小区块都是33%的宽度。指定百分比宽度。
不用响应式,好像页面架构会改变。
我是用1680*1050电脑做的网站。可是在1920*1680电脑下看会显示空白,在1366*768电脑下看会有横向滚动条,可我希望是网站紧缩一点,不要出现滚动条,除非真的很小的分辨率。
1366x768看有横向滚动条,就是容器里面的小区快之和,超过了1366,把页面总宽度给撑出了滚动条。检查一下。
不过建议最好老老实实仿照下列大站的做法,定个1000或者1190的宽度。别在乎侧边是不是露白太多。
或者仿淘宝的做法。
我当前分辨率:1920x1080,看下列网站:
baidu新闻 984px
sina新闻 1000px
sohu 1040px
sina微博 1000px
凤凰网 1000px
taobao 1190px 。其中淘宝当分辨率切成1024x768后,看taobao 是有媒体查询,宽度990px
另外还有amazon的做法,最小1000px,最大1500px
#pageContent {max-width: 1500px;min-width: 1000px; margin: auto; overflow: hidden}
越是大站,分辨率就必须至少支持1024x968这个尺寸,不是超大型站点,一般根据用户群的特点,可能做到1190px
个个健议你看一下bootstarp的做法,或者是一些大站,你这种做法很奇葩!!还有个人感觉你多看点基础!
@media only screen and (max-width:1200px){ #topbanner { width:1200px; } }
当屏幕小于某个尺寸,就让元素等于这个尺寸,可以保证你不会出现右侧空白的情况
另外,如果你想要所有设备都看上去一模一样,就不能设置固定的宽度,这样会把宽度挤出屏幕,导致出现滚动条
如:2个宽度300PX的图片,横着放,屏幕宽度只有500PX,就会有滚动条,
解决办法:图片设置50%(具体情况具体使用方法也不同,要自己多摸索了)
F12探测,可以帮你找到哪些元素超出了屏幕...

핫 AI 도구

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

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

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

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

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

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

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

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

뜨거운 주제











이 기사는 HTML & lt; Progress & Gt에 대해 설명합니다. 요소, 그 목적, 스타일 및 & lt; meter & gt의 차이; 요소. 주요 초점은 & lt; progress & gt; 작업 완료 및 & lt; meter & gt; Stati의 경우

이 기사는 HTML & LT; Datalist & GT에 대해 논의합니다. 자동 완성 제안을 제공하고, 사용자 경험을 향상시키고, 오류를 줄임으로써 양식을 향상시키는 요소. 문자 수 : 159

기사는 HTML5 크로스 브라우저 호환성을 보장하기위한 모범 사례에 대해 논의하고 기능 감지, 점진적 향상 및 테스트 방법에 중점을 둡니다.

이 기사는 HTML & lt; meter & gt에 대해 설명합니다. 범위 내에 스칼라 또는 분수 값을 표시하는 데 사용되는 요소 및 웹 개발의 일반적인 응용 프로그램. & lt; meter & gt; & lt; Progress & Gt; 그리고 Ex

이 기사에서는 브라우저에서 직접 사용자 입력을 검증하기 위해 필요한, Pattern, Min, Max 및 Length 한계와 같은 HTML5 양식 검증 속성을 사용하는 것에 대해 설명합니다.

이 기사는 모바일 장치의 반응 형 웹 디자인에 필수적인 Viewport Meta Tag에 대해 설명합니다. 적절한 사용이 최적의 컨텐츠 스케일링 및 사용자 상호 작용을 보장하는 방법을 설명하는 반면, 오용은 설계 및 접근성 문제로 이어질 수 있습니다.

이 기사는 & lt; iframe & gt; 외부 컨텐츠를 웹 페이지, 공통 용도, 보안 위험 및 객체 태그 및 API와 같은 대안을 포함시키는 태그의 목적.

GiteEpages 정적 웹 사이트 배포 실패 : 404 오류 문제 해결 및 해결시 Gitee ...
