Html5+CSS3不用宽度百分百怎样做响应式网站?

如题所述

第1个回答  2019-04-01

第一种:用vw和vh,

1vw 的意思就是把屏幕的宽分成一百分后中的一分,也就是1%;

vh 指高度,同上。

第二种:用bootstrap吧,bootstrap是一款CSS框架插件,自适应上做的很好,

比如,我们做一个DIV,让电脑端显示为三列,手机端显示一列,可以这样:

<div calss="row">
    <div class="col-md-3 col-12">第一列</div>
    <div class="col-md-3 col-12">第二列</div>
    <div class="col-md-3 col-12">第三列</div>
</div>

row表示行,col表示列,

col-md-3 表示在屏幕宽大于768时,分成12列中的三列,

col-12 表示屏幕宽在小于576时,分成12列,占全12列,也就是表示一整行的意思,

另外还有其它的单位,如 sm lg xl 等,都表示不同浏览器的宽度。

希望以帮助到你!

本回答被网友采纳

Html5+CSS3不用宽度百分百怎样做响应式网站?
第一种:用vw和vh,1vw 的意思就是把屏幕的宽分成一百分后中的一分,也就是1%;vh 指高度,同上。第二种:用bootstrap吧,bootstrap是一款CSS框架插件,自适应上做的很好,比如,我们做一个DIV,让电脑端显示为三列,手机端显示一列,可以这样:<div calss="row"> <div class="col-md-3 ...

什么是响应式网站?响应式网站建设解决方案
5. 前端制作的响应性: 利用HTML5+CSS3,实现灵活的布局和图片调整,确保页面元素在不同设备上都能自适应,提供无缝的浏览体验。6. 遵循谷歌网页设计标准: 通过跨平台的统一和定制化设计,提升用户体验,确保在各种设备和浏览器间的一致性。7. 加载速度优化: 通过精简代码、优化图片和合理配置服务器,确...

怎么用html5完成响应式布局?
响应式布局最简单的就是用css3来实现。我举一个最简单的例子。下面是html代码。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name ="viewport" content="width = device-width,initial-scale=1"> <title>index01<\/title> <link href="style01.css" type="tex...

...页面可见部分宽度啊!可我要铺满的是所有啊!怎么做
这个需要用到html5跟CSS3了,你这种效果也叫响应式,就是根据窗口大小自动缩放,了解一下CSS3吧

简单的响应式网页代码?
如何用一简单的CSS制作响应式HTML网页建议展开阅读 新人如果想快速开发出响应式网站建议使用响应式框架Bootstrap,Foundation等等...三个部分[Viewport][网格渗则扮视图][媒体查询]1.先在head里面设置Viewport meta?name="viewport"?content="width=device-width,?initial-scale=1.0"用户可以通过平移和缩放...

响应式网页设计怎么做?
你可以在3个步骤中学习到响应式设计和媒介查询(MediaQueries)的基本原理(假定你了解基本的CSS知识)。 ???第一步:Meta标签 大多数移动浏览器将HTML页面放大为宽的视图(viewport)以符合屏幕分辨率。你可以使用视图的meta标签来进行重置。下面的视图标签告诉浏览器,使用设备的宽度作为视图宽度并禁止初始的缩放。 第二步...

bootstrap快速搭建页面(bootstrap搭建网页框架)
就是不用自己再去写一些简单的css效果.多练.多使用它就属于你.在给出一个只有简单的带有导航栏的页面.该页面,理解透了,这个东西你就算学会了,剩下的就是用什么查一下文档就拿来用了,怎么使用web前端框架bootstrap1.Bootstrap是基于HTML5和CSS3开发的前端框架,它简洁灵活,使得Web开发更加快捷 兼容...

响应式网站的制作难点主要有哪些
1、设计难 因为不能使用绝对定位,那么在设计的时候需要考虑可读性以及区域面积以及在不同的设备下的行为。这对一般的设计师来说简直是一场灾难。所以很少有出众的响应式网站出现。2、实现更难 响应式设计出的稿子,当然还需要响应式的实现。响应式的基础就是HTML5, CSS3。一般的建站公司,一般是没有...

CSS3怎么做出响应式布局
如何用CSS做响应式布局呢?1、在HTML头部添加以下代码,用来显示兼容移动设备的显示效果。<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" \/> 参数详解:width=device-width :宽度等于当前设备的宽度 initial-scale=1 :初始的...

介绍下找网站制作公司要选择响应式的原因及报价
呼应式网站制造开发相对来说比传统PC网站要稍微难点,这是因为呼应式网站主要是采用HTML5+CSS3,可以说是当时最新最前沿的网页开发技术,因为非常多的效果都是要纯手写完结的,所以大大增加了工作量和开发难度。屏幕大小不一。为了节省企业的开发本钱,前进资源应用功率,这就需求找到一种可以兼容到不同终端...

相似回答