第九十五节，移动流体布局和响应式布局总结

移动流体布局和响应式布局总结

宽度与高度

区块宽度一般用max-width 最大宽度和百分比，来定义宽度，因为要实现自动缩放

高度如果要自适应，就不需要定义高度，或者定义最小高度

注意：横向的尽量用百分比，如边距等

图片自适应

保证小于图片分辨率的手机，自适应等宽屏幕

图片一定要能够自适应等比例缩放才能保证布局的正确性。

方法：将图片的img标签转换成区块，将最大宽度设置为100%，这样图片就会自适应了

img{display: block;max-width: 100%;
}

媒体查询

手机网站一般媒体查询都是控制字体大小

响应式网站，媒体查询要控制字体大小，和宽度高度，以及区块隐藏等

媒体查询是手机网站和自适应网站的重要部分，媒体查询可以根据不同的屏幕大小，做响应的处理，如文字的大小，区块隐藏等等

    /*媒体查询，大于480小于640*/ @media (min-width:480px) and (max-width:640px) { #tour h2 { font-size: .26rem; } #tour h3 { font-size: .16rem; } #footer { font-size: .14rem; } } /*媒体查询，小于480*/ @media (max-width:480px) { #tour h2 { font-size: .18rem; } #tour h3 { font-size: .14rem; } #footer { font-size: .12rem; } }

转载于:https://www.cnblogs.com/adc8868/p/6013228.html

第九十五节，移动流体布局和响应式布局总结相关推荐

流体式布局与响应式布局_将固定像素设计转换为流体比例布局
流体式布局与响应式布局 Responsive web design has been a prime necessity for every enterprise ever since Google ...
流体布局，响应式布局
适配布局类型 PC及移动端页面适配方法设备屏幕有多种不同的分辨率,页面适配方案有如下几种: 1.全适配:响应式布局+流体布局 2.移动端适配: 流体布局+少量响应式基于rem的布局流体布局流体 ...
静态布局、流式布局、自适应布局、弹性布局、响应式布局
静态布局.流式布局.自适应布局.弹性布局.响应式布局前端的布局主要有: 静态布局.流式布局.自适应布局.弹性布局.响应式布局等. 一.静态布局: 尺寸上一律使用px;同时限制外层容器的大小:中间的宽 ...
流式布局与响应式布局
常见的面试题会让你聊一聊流式布局与响应式布局,我还没遇到过直接问他俩区别的面试官,都是根据我的项目(里面有用到流式布局+响应式布局). 围绕这两点感觉网上大部分博客都长得差不多,那我就用自己粗浅的理解 ...
flex布局和响应式布局
flex伸缩布局一.是什么 Flexible Box 简称 flex,意为"弹性布局",可以简便.完整.响应式地实现各种页面布局,采用Flex布局的元素,称为flex容器cont ...
html响应式弹性布局,CSS3响应式布局之弹性盒子
CSS3弹性盒模型可以轻松的创建自适应浏览器流动窗口的布局或自适应字体大小的布局.同时该盒子决定了一个盒子在其他盒子的分布方式,及如何处理可用的空间. 自己写了一个弹性盒子的demo: 主要HTML代 ...
什么是响应式布局？响应式布局有几种方法？
目录什么是响应式布局? 响应式布局的4种方法媒体查询百分比 vw/vh rem 什么是响应式布局? 响应式布局是同一页面在不同的屏幕上有不同的布局,即只需要一套代码使页面适应不同的屏幕响应式布 ...
CSS之布局系列--静态布局、流式布局、自适应布局、响应式布局的概念及区别
原文网址:CSS之布局系列--静态布局.流式布局.自适应布局.响应式布局的概念及区别静态布局.流式布局.自适应布局.响应式布局的概念及区别_IT利刃出鞘的博客-CSDN博客简介说明本文介绍前端的 ...
前端css弹性布局，响应式布局，多列布局
前端css弹性布局,响应式布局,多列布局主页 <!DOCTYPE html> <html><head><meta charset="utf-8&q ...

第九十五节，移动流体布局和响应式布局总结

第九十五节，移动流体布局和响应式布局总结相关推荐

最新文章

热门文章