如何让网页自适应手机分辨率?

辉辉
  • 2
新手上路,请多包涵

我做的网页感觉在不同屏幕分辨率下显示效果不同,现在又什么好的办法解决这个问题没,能让网页自适应屏幕分辨率
并且布局保持不变 不管多大屏幕显示的是整个页面的放大或缩小之后的布局

回复
阅读 7.1k
12 个回答
✓ 已被采纳

css的媒体查询功能就是做这个的。

根据楼主提出的问题,建议楼主去看三方面的内容:1. 响应式设计。2. 媒体查询 3. vw,vh,vmax,vmin 单位。希望能够帮到你!

使用rem作为单位,并且使用媒体查询进行不同分辨率下的font-size的设置

看看rem的用法。在html标签上设置font-size,内部所有标签应用rem单位

somewhere
  • 1
新手上路,请多包涵

可以用媒体查询先区别开 例如:max-width:768px 屏幕768以下的(移动设备) 用rem做 这样的话 代码量和写两套差不多了 但也是一种解决方法

2步
a:媒体查询中:

 在媒体查询中使用em单位替代px单位,这能让文本缩放在必要时触发布局的变化;
 避免媒体查询,使用百分比取代固定长度或用视口相关单位(vw,vh,vmin和vmax),他们的值解析为视体宽和高的%;
 在较大分辨率下回去固定宽度,使用max-width,它可以适应较小分辨率无需媒体查询;
 替换元素img,object,video,iframe设置max-width值为100%;
 使背景图片完整铺满一个容器,不管尺寸如何变化,background-size:cover;
 进行类似行列式式布局,使用flex布局解决;
 在使用多列文本时,column-count用column-width替代可以在较小的屏幕上自动显示为单列布局
 

然后使用CSS3的媒体;

这个辉辉有点印象,同样的问题反复的问!上一个问题回答过你,你有课外实践过吗?
移动端网页怎么做?

林志雄
  • 3
新手上路,请多包涵

rem布局然后 css3媒体查询

宣传栏