如何把普通网站修改为响应式

如何把普通网站修改为响应式

使用媒体查询来设置样式media query。

// 不同的屏幕尺寸对应不同的样式@media screen and (max-width:980px){
    html {}
    body {}
    ......}/** ipad **/@media only screen and (min-width:768px)and(max-width:1024px){
    ......}/** iphone **/@media only screen and (width:320px)and (width:768px){
    ......}

宽度百分比布局

// 宽度不固定，可以使用百分比#head{width:100%;}#content{width:50%;}

字体rem处理

rem是相对于根元素的，所以需要重置根元素字体大小。

// 方式一：js设置html的font-size大小document.documentElement.style.fontSize = document.documentElement.clientWidth / 750 + 'px';// 方式二：使用vw设置，vw也是一个相对单位，100vw等于屏幕宽度html{
    font-size: 10vw;}// 方式三：媒体查询, 设定每种屏幕对应的font-size@media screen and (min-width:240px) {
    html, body, button, input, select, textarea {
        font-size:9px;
    }}@media screen and (min-width:320px) {
	html, body, button, input, select, textarea {
		font-size:12px;
	}}

一个网站只在桌面屏幕上好看是远远不够的，同时也要在平板电脑和智能手机中能够良好呈现。响应式的网站是指它能够适应客户端的屏幕尺寸，自动响应客户端尺寸变化。在这篇文章中，我将向您展示如何通过3个简单的步骤轻松地使网站变成响应式（Responsive）