如何让我对css的更改实际出现?

时间:2018-04-24 04:18:12

标签: html css twitter-bootstrap twitter-bootstrap-3

我尝试使用css对我的简历进行更改,但这些更改并未适用。我尝试在Brackets代码编辑器中使用Live Preview并使用firefox直接打开文件。我已将样式表链接到我的html文档。这是我的css:



body {
  font-size: 4px;
}

h1 {
  text-align: center;
}

.position {
  float: left;
  line-height: 0.8em;
}

.company-dates {
  float: right;
  line-height: 0.8em;
  text-align: right;
}


/* Custom, iPhone Retina */

@media (min-width: 320px) {
  body {
    margin-top: 10px;
    margin-bottom: 10px;
    min-width: 320px;
    line-height: 1.0em;
    font-family: 'Times New Roman', Times, serif;
    font-size: 4px;
  }
  .contact-right {
    line-height: 0.8em;
    text-align: left;
  }
}


/* Extra Small Devices, Phones */

@media (min-width: 480px) {
  body {
    margin-top: 10px;
    margin-bottom: 10px;
    line-height: 1.0em;
    font-family: 'Times New Roman', Times, serif;
    font-size: 4px;
  }
  .contact-right {
    line-height: 0.8em;
    text-align: right;
  }
}


/* Small Devices, Tablets */

@media (min-width: 768px) {
  body {
    margin-top: 10px;
    margin-bottom: 10px;
    line-height: 1.0em;
    font-family: 'Times New Roman', Times, serif;
    font-size: 14px;
  }
}


/* Medium Devices, Desktops */

@media (min-width: 992px) {
  body {
    margin-top: 10px;
    margin-bottom: 10px;
    line-height: 1.2em;
    font-family: 'Times New Roman', Times, serif;
    font-size: 24px;
  }
}


/* Large Devices, Wide Screens */

@media (min-width: 1200px) {
  body {
    margin-top: 10px;
    margin-bottom: 10px;
    line-height: 1.2em;
    font-family: 'Times New Roman', Times, serif;
    font-size: 20px;
  }
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title>Redacted</title>
  <link rel="stylesheet" type="text/css" href="style.css" />
  <meta name="viewport" content="width=device-width, initial-scale=1"></meta>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"></link>
  <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <!-- Latest compiled JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="container header">
    <h1>Redacted</h1>
  </div>
  <div class="container">
    <div class="row">
      <div class="contact-left col-sm-6 col-xs-12">
        <p>(919)-397-8116</p>
        <p>Github: <a href="Redacted" target="_blank">Redacted</a></p>
        <p>Redacted</p>
      </div>
      <div class="contact-right col-sm-6 col-xs-12">
        <p>Redacted</p>
        <p>Redacted</p>
      </div>
    </div>
  </div>
  <div class="container">
    <h5><b>Summary</b></h5>
    <p>&emsp;&emsp;Team player software engineer with open-source, frontend, backend, and management experience. I make others around me better through excellent communication and a purely constructive attitude. You should hire me because I have a passion
      for making cool stuff that makes people’s lives better and the broad technical aptitude to do it.</p>
  </div>
  <div class="container">
    <h5><b>Objective</b></h5>
    <p>&emsp;&emsp;Seeking a full-time position in Software Development for an innovative company that will help me specialize my skills. I have a vast foundation that allows me to learn new things quickly and want experiences that will help me deepen my
      skillset.</p>
  </div>
  <div class="container" style="overflow: auto;">
    <h5><b>Education</b></h5>
    <div class="row">
      <div class="education-left col-sm-6 col-xs-12">
        <p>&emsp;&emsp;Redacted</p>
        <p>&emsp;&emsp;B.S., Computer Engineering May 2017</p>
      </div>
    </div>
  </div>
  <div class="container professional-experience">
    <h5><b>Professional Experience</b></h5>
    <div>
      <div class="" style="overflow: auto;">
        <div class="position">
          <p><u>QA Lead</u></p>
        </div>
        <div class="company-dates">
          <p>Redacted</p>
          <p>December 2017 – April 2018</p>
        </div>
      </div>
      <ul class="position-information">
        <li>Led a team of 3 offshore and 1 local Test Engineers in Quality Control, the Software Test Life Cycle, Automation best practices, Team Communication, and Time Management</li>
        <li>Introduced and Documented a new effort in website test automation using Snaptest</li>
        <li>Initiated a system of code reviews and a deployment plan throughout the company</li>
        <li>Developed 10 automated test scripts for API endpoints in Go and numerous others in Postman using Javascript</li>
        <li>Created over 75 automated tests for websites across various projects in Snaptest</li>
      </ul>
    </div>
    <div>
      <div style="overflow: auto;">
        <div class="position">
          <p><u>Developer/Project Manager</u></p>
        </div>
        <div class="company-dates">
          <p>Redacted</p>
          <p>April 2017 – December 2017</p>
        </div>
      </div>
      <ul class="position-information">
        <li>Developed a base API framework and production-ready endpoints in Go</li>
        <li>Designed the Bluetooth LE communication scheme for a mobile application to a custom proprietary IOT healthcare product in C</li>
        <li>Led 3 teams of developers across 3 projects in multiple platforms, 2 of which were from start to completion</li>
        <li>Created a Unity demo project with lightsabers for the Meta 2 Augmented Reality headset</li>
      </ul>
    </div>
    <div>
      <div style="overflow: auto;">
        <div class="position">
          <p><u>Software Development Student</u></p>
        </div>
        <div class="company-dates">
          <p>Redacted</p>
          <p>Aug. – Dec. 2015</p>
        </div>
      </div>
      <ul class="position-information">
        <li>Delivered solutions for 14 software defects and 2 user stories using Java on Android</li>
        <li>Contributed to team-wide software integrity using a peer code review process in Gerrit</li>
      </ul>
    </div>
    <div>
      <div style="overflow: auto;">
        <div class="position">
          <p><u>Software Test Student</u></p>
        </div>
        <div class="company-dates">
          <p>Redacted</p>
          <p>Aug. – Dec. 2014, May – Aug. 2016</p>
        </div>
      </div>
      <ul class="position-information">
        <li>Documented 51 unique software issues in a Scrum development cycle</li>
        <li>Scripted automated test suites for several user stories in RIDE, spanning hundreds of test cases</li>
        <li>Developed an Excel macro that parses thousands of user reviews for keywords and trends</li>
        <li>Seamlessly Transitioned between 3 mobile operating systems and 2 separate applications</li>
      </ul>
    </div>
  </div>
  <div class="container various-technical-experience">
    <h5><b>Various Other Technical Experience</b></h5>
    <ul class="position-information">
      <li><b>Golang/Open Source:</b> Contributed to the alexa-skills-git-golang and go-jira Github open-source repos</li>
      <li><b>XHTML/CSS:</b> Built a version of this resume using XHTML/CSS</li>
      <li><b>PHP:</b> Personal websitethat interfaces with the OMDB movie search API</li>
      <li><b>Python:</b> Personal desktop app client using PyQT4, UI creation, API utilization, Multithreading</li>
      <li><b>C:</b> Compiler design, Text autocomplete function, GPS application</li>
      <li><b>C++:</b> Team project working with a LIDAR sensor to detect and analyze objects for an autonomous vehicle – used OpenCV and Visual Studio</li>
    </ul>
  </div>
</body>

</html>
&#13;
&#13;
&#13;

我的问题是font-size: 20px;断点中的@media (min-width : 1200px)等更改无法正常工作。我没有看到文件中的任何变化。我尝试在断点处将最小宽度更改为最大宽度,但这没有做任何事情。我还认为断点本身可能不起作用,所以我将body标签放在顶部以适用于所有尺寸,但仍然没有。我只是得到通用的font-size = 14px;这是bootstrap的标准。有什么想法吗?

3 个答案:

答案 0 :(得分:3)

您应该始终在(下面)bootstrap css链接之后链接您的自定义样式表。

&#13;
&#13;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title>Redacted</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <!-- Latest compiled JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel="stylesheet" type="text/css" href="style.css" />
  <!-- 
  *
  * Remove the css codes below and place them in the style.css file linked exactly above these lines if you need to use an external css
  *
  -->
  <style>
    body {
      font-size: 4px;
    }
    
    h1 {
      text-align: center;
    }
    
    .position {
      float: left;
      line-height: 0.8em;
    }
    
    .company-dates {
      float: right;
      line-height: 0.8em;
      text-align: right;
    }
    /* Custom, iPhone Retina */
    
    @media (min-width: 320px) {
      body {
        margin-top: 10px;
        margin-bottom: 10px;
        min-width: 320px;
        line-height: 1.0em;
        font-family: 'Times New Roman', Times, serif;
        font-size: 4px;
      }
      .contact-right {
        line-height: 0.8em;
        text-align: left;
      }
    }
    /* Extra Small Devices, Phones */
    
    @media (min-width: 480px) {
      body {
        margin-top: 10px;
        margin-bottom: 10px;
        line-height: 1.0em;
        font-family: 'Times New Roman', Times, serif;
        font-size: 4px;
      }
      .contact-right {
        line-height: 0.8em;
        text-align: right;
      }
    }
    /* Small Devices, Tablets */
    
    @media (min-width: 768px) {
      body {
        margin-top: 10px;
        margin-bottom: 10px;
        line-height: 1.0em;
        font-family: 'Times New Roman', Times, serif;
        font-size: 14px;
      }
    }
    /* Medium Devices, Desktops */
    
    @media (min-width: 992px) {
      body {
        margin-top: 10px;
        margin-bottom: 10px;
        line-height: 1.2em;
        font-family: 'Times New Roman', Times, serif;
        font-size: 24px;
      }
    }
    /* Large Devices, Wide Screens */
    
    @media (min-width: 1200px) {
      body {
        margin-top: 10px;
        margin-bottom: 10px;
        line-height: 1.2em;
        font-family: 'Times New Roman', Times, serif;
        font-size: 20px;
      }
    }
  </style>
</head>

<body>
  <div class="container header">
    <h1>Redacted</h1>
  </div>
  <div class="container">
    <div class="row">
      <div class="contact-left col-sm-6 col-xs-12">
        <p>(919)-397-8116</p>
        <p>Github: <a href="Redacted" target="_blank">Redacted</a></p>
        <p>Redacted</p>
      </div>
      <div class="contact-right col-sm-6 col-xs-12">
        <p>Redacted</p>
        <p>Redacted</p>
      </div>
    </div>
  </div>
  <div class="container">
    <h5><b>Summary</b></h5>
    <p>&emsp;&emsp;Team player software engineer with open-source, frontend, backend, and management experience. I make others around me better through excellent communication and a purely constructive attitude. You should hire me because I have a passion
      for making cool stuff that makes people’s lives better and the broad technical aptitude to do it.</p>
  </div>
  <div class="container">
    <h5><b>Objective</b></h5>
    <p>&emsp;&emsp;Seeking a full-time position in Software Development for an innovative company that will help me specialize my skills. I have a vast foundation that allows me to learn new things quickly and want experiences that will help me deepen my
      skillset.
    </p>
  </div>
  <div class="container" style="overflow: auto;">
    <h5><b>Education</b></h5>
    <div class="row">
      <div class="education-left col-sm-6 col-xs-12">
        <p>&emsp;&emsp;Redacted</p>
        <p>&emsp;&emsp;B.S., Computer Engineering May 2017</p>
      </div>
    </div>
  </div>
  <div class="container professional-experience">
    <h5><b>Professional Experience</b></h5>
    <div>
      <div class="" style="overflow: auto;">
        <div class="position">
          <p><u>QA Lead</u></p>
        </div>
        <div class="company-dates">
          <p>Redacted</p>
          <p>December 2017 – April 2018</p>
        </div>
      </div>
      <ul class="position-information">
        <li>Led a team of 3 offshore and 1 local Test Engineers in Quality Control, the Software Test Life Cycle, Automation best practices, Team Communication, and Time Management</li>
        <li>Introduced and Documented a new effort in website test automation using Snaptest</li>
        <li>Initiated a system of code reviews and a deployment plan throughout the company</li>
        <li>Developed 10 automated test scripts for API endpoints in Go and numerous others in Postman using Javascript</li>
        <li>Created over 75 automated tests for websites across various projects in Snaptest</li>
      </ul>
    </div>
    <div>
      <div style="overflow: auto;">
        <div class="position">
          <p><u>Developer/Project Manager</u></p>
        </div>
        <div class="company-dates">
          <p>Redacted</p>
          <p>April 2017 – December 2017</p>
        </div>
      </div>
      <ul class="position-information">
        <li>Developed a base API framework and production-ready endpoints in Go</li>
        <li>Designed the Bluetooth LE communication scheme for a mobile application to a custom proprietary IOT healthcare product in C</li>
        <li>Led 3 teams of developers across 3 projects in multiple platforms, 2 of which were from start to completion</li>
        <li>Created a Unity demo project with lightsabers for the Meta 2 Augmented Reality headset</li>
      </ul>
    </div>
    <div>
      <div style="overflow: auto;">
        <div class="position">
          <p><u>Software Development Student</u></p>
        </div>
        <div class="company-dates">
          <p>Redacted</p>
          <p>Aug. – Dec. 2015</p>
        </div>
      </div>
      <ul class="position-information">
        <li>Delivered solutions for 14 software defects and 2 user stories using Java on Android</li>
        <li>Contributed to team-wide software integrity using a peer code review process in Gerrit</li>
      </ul>
    </div>
    <div>
      <div style="overflow: auto;">
        <div class="position">
          <p><u>Software Test Student</u></p>
        </div>
        <div class="company-dates">
          <p>Redacted</p>
          <p>Aug. – Dec. 2014, May – Aug. 2016</p>
        </div>
      </div>
      <ul class="position-information">
        <li>Documented 51 unique software issues in a Scrum development cycle</li>
        <li>Scripted automated test suites for several user stories in RIDE, spanning hundreds of test cases</li>
        <li>Developed an Excel macro that parses thousands of user reviews for keywords and trends</li>
        <li>Seamlessly Transitioned between 3 mobile operating systems and 2 separate applications</li>
      </ul>
    </div>
  </div>
  <div class="container various-technical-experience">
    <h5><b>Various Other Technical Experience</b></h5>
    <ul class="position-information">
      <li><b>Golang/Open Source:</b> Contributed to the alexa-skills-git-golang and go-jira Github open-source repos</li>
      <li><b>XHTML/CSS:</b> Built a version of this resume using XHTML/CSS</li>
      <li><b>PHP:</b> Personal websitethat interfaces with the OMDB movie search API</li>
      <li><b>Python:</b> Personal desktop app client using PyQT4, UI creation, API utilization, Multithreading</li>
      <li><b>C:</b> Compiler design, Text autocomplete function, GPS application</li>
      <li><b>C++:</b> Team project working with a LIDAR sensor to detect and analyze objects for an autonomous vehicle – used OpenCV and Visual Studio</li>
    </ul>
  </div>
</body>

</html>
&#13;
&#13;
&#13;

答案 1 :(得分:2)

两件事:

  • 首先在引导程序之后移动连接css的行,否则引导程序样式将生效,因为它稍后会出现。 <link rel="stylesheet" type="text/css" href="style.css" />
  • 第二:添加!对您的字体大小样式很重要(例如:font-size: 24px !important;

答案 2 :(得分:0)

尝试将最小值更改为最大值。可以把它想象成这个屏幕有多大?&#39;

/* Custom, iPhone Retina */ 
@media (max-width : 320px)